1.盒子沒有固定的寬和高?
方法1.通過Transforms變形
? ? ? ? 這是比較簡單的方法，不僅能實(shí)現(xiàn)絕對居中的效果，也支持聯(lián)合可變高度方式使用。內(nèi)容塊定義transform: translate(-50%,-50%)? 必須加上top: 50%; left: 50%。但是不兼容IE8以及以下，因?yàn)檫@個屬性是css3新加的屬性，可能干擾其他transform效果，某些情形下會出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象。具體代碼如下：
.wrapper {
padding: 20px;
? ? ? ? ? ? ? ? ? ? ? background: orange;
? ? ? ? ? ? ? ? ? ? ? color: #fff;
? ? ? ? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? ? ? ? top: 50%;
? ? ? ? ? ? ? ? ? ? ? left: 50%;
? ? ? ? ? ? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? ? ? ? ? ? -webkit-transform:
? ? ? ? ? ? ? ? ? ? ? ? ? translate(-50%, -50%);
? ? ? ? ? ? ? ? ? ? ? -moz-transform:? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? translate(-50%, -50%);
? ? ? ? ? ? ? ? ? ? ? transform:
? ? ? ? ? ? ? ? ? ? ? ? ? translate(-50%, -50%);
? ? ? ? }
? ? ? ?
方法2.在父級元素上面加上3句話，就可以實(shí)現(xiàn)子元素水平垂直居中。這種方法只需在父級加上justify-content: center;align-items: center;display: -webkit-flex就可以，但是這種方法兼容性也不好。
.wrapper {
? ? width: 500px;
? ? height: 300px;
? ? background: orange;
? ? color: #fff;
? ? ? ? ? ? /*只需要在父元素上加這三句*/
? ? ? ? ? ? justify-content: center; /*子元素水平居中*/
? ? ? ? ? ? align-items: center; /*子元素垂直居中*/
? ? ? ? ? ? display: -webkit-flex;
? ? ? ? }
2.盒子有固定的寬和高
方法1、margin 負(fù)間距，兼容性好
這個方案代碼關(guān)鍵點(diǎn)在于：
? ? 1.必需知道該div的寬度和高度。
? ? ? 2.然后設(shè)置位置為絕對位置。
? ? 3.距離頁面窗口左邊框和上邊框的距離設(shè)置為50%，這個50%就是指頁面窗口的寬度和高度的50%。
4.最后將該div分別左移和上移，左移和上移的大小就是該DIV寬度和高度的一半。
.wrapper {
width: 400px;
height: 18px;
padding: 20px;
background: orange;
color: #fff;
position: absolute;
top:50%;
left:50%;
margin-top: -9px;
margin-left: -200px;
}
? ? ?
方法2.margin:auto實(shí)現(xiàn)絕對定位元素的居中（此方法兼容ie8以上瀏覽器）
這一個代碼的代碼關(guān)鍵點(diǎn)在于：
1、上下左右均0位置定位；
? ? ? ? ? 2、margin: auto;
.wrapper {
width: 400px;
height: 18px;
padding:20px;
background: orange;
color: #fff;
position: absolute;
left:0;
right:0;
top: 0;
bottom: 0;
margin: auto;
}
3.父級的高度根據(jù)子級的自適應(yīng)，子級盒子垂直水平居中。使用display:table結(jié)合vertical-align:middle來實(shí)現(xiàn)，此方法只兼容IE8以上的瀏覽器
這個代碼的關(guān)鍵點(diǎn)在于：
1.父級盒子設(shè)置display:table;
2.子級盒子設(shè)置display:table-cell;text-align: center;vertical-align:middle;
#demo{
display:table;
width:500px;
margin:10px auto;
background:#eee;
}
.box{
width: 300px;
height:100px;
display:table-cell;
text-align: center;
vertical-align:middle;
}
