第一种 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 }