写在前面:
一、父元素能不把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好用~