css垂直居中

第一種 css3的transform寫在子級上

 1 .ele{
 2 display:inline-block;
 3 /*設置元素絕對定位*/
 4 position:absolute;
 5 /*top 50%*/
 6 top: 50%;
 7 /*left 50%*/
 8 left: 50%;
 9 /*css3 transform 實現*/
10 transform: translate(-50%, -50%);
11 }

 

第二種 flex盒子佈局 寫在父級上

1 .ele{
2 /*彈性盒模型*/ 
3 display:flex;
4 /*主軸居中對齊*/
5 justify-content: center;
6 /*側軸居中對齊*/ 
7 align-items: center; 
8 }

 

第三種 display的table-cell  

1 .box{
2 /*讓元素渲染爲表格單元格*/
3 display:table-cell;
4 /*設置文本水平居中*/
5 text-align:center; 
6 /*設置文本垂直居中*/
7 vertical-align:middle; 
8 }

 

第四種: 絕對定位:在子級上寫,父級寫相對定位

 

1 .div{
2 position:absolute;
3 top:0;
4 bottom:0;
5 left:0;
6 right:0;
7 margin:auto;
8 }