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

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

标签自带垂直居中功能

将div伪装成table元素：父元素display：table；子元素display：table-cell
<----------------------------------- 加before&after伪类元素来占位------------------------------------- >

父元素加入before after伪类元素，before&after伪类元素、子元素inline-block，100%高度
<------------------------------------- 绝对定位大法------------------------------------- >

使用绝对定位，calc(50% - 150px) <=50%是相对于父元素，150px是子元素宽度或高度的一半

使用绝对定位, transform: translate(-50%,-50%)<=是相对于子元素

使用绝对定位， margin：auto；top&bottom&left&right都为0
<------------------------------------- flex布局------------------------------------- >

flex布局，justify-content：center；align-items：center；

【2019-03-27/块级元素的七种垂直居中方式】终上所述，感觉还是flex好用~