2019-03-27/块级元素的七种垂直居中方式

写在前面:
一、父元素能不把height写死就不要写死,父元素没有定义height情况下,只要padding: 30px 0 就可以轻松+愉快实现垂直居中。

<------------------------------------- table大法------------------------------------- >

  1. 标签自带垂直居中功能
  2. 将div伪装成table元素:父元素display:table;子元素display:table-cell
    <----------------------------------- 加before&after伪类元素来占位------------------------------------- >
  3. 父元素加入before after伪类元素,before&after伪类元素、子元素inline-block,100%高度
    <------------------------------------- 绝对定位大法------------------------------------- >
  4. 使用绝对定位,calc(50% - 150px) <=50%是相对于父元素,150px是子元素宽度或高度的一半
  5. 使用绝对定位, transform: translate(-50%,-50%)<=是相对于子元素
  6. 使用绝对定位, margin:auto;top&bottom&left&right都为0
    <------------------------------------- flex布局------------------------------------- >
  7. flex布局,justify-content:center;align-items:center;
  8. 终上所述,感觉还是flex好用~

    你可能感兴趣的:(2019-03-27/块级元素的七种垂直居中方式)