写在前面：
一、父元素能不把height写死就不要写死，父元素没有定义height情况下，只要padding: 30px 0 就可以轻松+愉快实现垂直居中。
<------------------------------------- table大法------------------------------------- >
- <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；
终上所述，感觉还是flex好用~
网友评论