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

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

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

1. <table>标签自带垂直居中功能
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；

终上所述，感觉还是flex好用~