方案一:
div绝对定位水平垂直居中(margin:auto实现绝对定位元素居中)
兼容性:IE7之前版本不支持
div{ width: 200px; height: 200px; background: green; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }
方案二:
div绝对定位水平居中(margin负间距)
div{ width: 200px; height: 200px; background: green; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; }
方案三:
div绝对定位水平垂直居中(transform变形)
兼容性:IE8不支持;
div{ width: 200px; height: 200px; background: green; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);/*自己的50%*/ }
方案四:
css不定宽高水平垂直居中
.box{ height: 600px; display:flex; justify-content:center; align-items:center; } .box>div{ background: green; width: 200px; height: 200px; }
方案五:
将父盒子设置为table-cell元素,可以使用 text-align:center 和 vertical-align:middle 实现水平垂直居中。鼻尖完美的解决方案是利用三层结构模拟父子结构。
<p class="outerBox" tableCell"> <p class="ok"> <p class="innerBox">tableCell</p> </p> </p> /* table-cell实现居中 将父盒子设置为table-cell元素,设置 text-align:center, vertical-align:middle; 子盒子设置为inline-block元素 */ .tableCell{ display: table; } .tableCell .ok{ display: table-cell; text-align: center; vertical-align: middle; } .tableCell .innerBox{ display: inline-block; }
方案六:
对子盒子实现绝对定位,利用calc计算位置
<p class="outerBox calc"> <p class="innerBox">calc</p> </p> /*绝对定位,calc计算位置*/ .calc{ position: relative; } .calc .innerBox{ position: absolute; left: -webkit-calc((500px - 200px)/2); top: -webkit-calc((120px - 50px)/2); left: -moz-calc((500px - 200px)/2); top: -moz-calc((120px - 50px)/2); left: calc((500px - 200px)/2); top: calc((120px - 50px)/2); }