方案一：
div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，
兼容性：,IE7及之前版本不支持
1 div{ 2 200px; 3 height: 200px; 4 background: green; 5 position:absolute; 6 left:0; 7 top: 0; 8 bottom: 0; 9 right: 0; 10 margin: auto; 11 }
方案二：
div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。
1 div{ 2 200px; 3 height: 200px; 4 background:green; 5 position: absolute; 6 left:50%; 7 top:50%; 8 margin-left:-100px; 9 margin-top:-100px; 10 }
方案三：
div绝对定位水平垂直居中【Transforms 变形】
兼容性：IE8不支持；
1 div{ 2 200px; 3 height: 200px; 4 background: green; 5 position:absolute; 6 left:50%; /* 定位父级的50% */ 7 top:50%; 8 transform: translate(-50%,-50%); /*自己的50% */ 9 }
方案四：
css不定宽高水平垂直居中
1 .box{ 2 3 height:600px; 4 display:flex; 5 justify-content:center; 6 align-items:center; 7 /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ 8 } 9 .box>div{ 10 background: green; 11 200px; 12 height: 200px; 13 }
方案五：
将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构
1 <p class="outerBox tableCell"> 2 </p><p class="ok"> 3 </p><p class="innerBox">tableCell</p> 4 <p></p> 5 <p></p> 6 7 8 /* 9 table-cell实现居中 10 将父盒子设置为table-cell元素，设置 11 text-align:center,vertical-align: middle; 12 子盒子设置为inline-block元素 13 */ 14 .tableCell{ 15 display: table; 16 } 17 .tableCell .ok{ 18 display: table-cell; 19 text-align: center; 20 vertical-align: middle; 21 } 22 .tableCell .innerBox{ 23 display: inline-block; 24 }
方案六：
对子盒子实现绝对定位，利用calc计算位置
1 <p class="outerBox calc"> 2 </p><p class="innerBox">calc</p> 3 <p></p> 4 5 6 /*绝对定位，clac计算位置*/ 7 .calc{ 8 position: relative; 9 } 10 .calc .innerBox{ 11 position: absolute; 12 left:-webkit-calc((500px - 200px)/2); 13 top:-webkit-calc((120px - 50px)/2); 14 left:-moz-calc((500px - 200px)/2); 15 top:-moz-calc((120px - 50px)/2); 16 left:calc((500px - 200px)/2); 17 top:calc((120px - 50px)/2); 18 }