1.盒子沒有固定的寬和高?
方法1.通過Transforms變形
? ? ? ? 這是比較簡單的方法，不僅能實(shí)現(xiàn)絕對(duì)居中的效果冯痢，也支持聯(lián)合可變高度方式使用。內(nèi)容塊定義transform: translate(-50%,-50%)? 必須加上top: 50%; left: 50%框杜。但是不兼容IE8以及以下浦楣，因?yàn)檫@個(gè)屬性是css3新加的屬性，可能干擾其他transform效果咪辱，某些情形下會(huì)出現(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.在父級(jí)元素上面加上3句話历恐，就可以實(shí)現(xiàn)子元素水平垂直居中寸癌。這種方法只需在父級(jí)加上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ù)間距溪烤，兼容性好
這個(gè)方案代碼關(guān)鍵點(diǎn)在于：
? ? 1.必需知道該div的寬度和高度。
? ? ? 2.然后設(shè)置位置為絕對(duì)位置庇勃。
? ? 3.距離頁面窗口左邊框和上邊框的距離設(shè)置為50%檬嘀，這個(gè)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)絕對(duì)定位元素的居中（此方法兼容ie8以上瀏覽器）
這一個(gè)代碼的代碼關(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í)的高度根據(jù)子級(jí)的自適應(yīng)蛋济，子級(jí)盒子垂直水平居中棍鳖。使用display:table結(jié)合vertical-align:middle來實(shí)現(xiàn)炮叶，此方法只兼容IE8以上的瀏覽器
這個(gè)代碼的關(guān)鍵點(diǎn)在于：
1.父級(jí)盒子設(shè)置display:table;
2.子級(jí)盒子設(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;
}
