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 }

 

 

转载于:https://www.cnblogs.com/xfcao/p/11078887.html