廢話不多說(shuō)诉探，直接看代碼溺忧！
1.margin: auto;實(shí)現(xiàn)絕對(duì)定位元素的水平垂直居中野来，IE7及以下低版本瀏覽器不兼容
<div class='maps1'></div>
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.maps1{
width: 200px;
height: 200px;
background-color: #000;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
2. margin的負(fù)間距實(shí)現(xiàn)絕對(duì)定位元素的水平垂直居中,兼容性比較好呐籽，比較常用
<div class='maps2'></div>
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.maps2{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background-color: green;
border: 10px solid #000;
margin: -110px 0 0 -110px;
}
3.通過(guò)transform偏移實(shí)現(xiàn)絕對(duì)定位元素的水平垂直居中河爹， IE8及以下低版本瀏覽器不兼容
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.maps3{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background-color: gray;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
4.CSS3彈性盒模型布局不定寬高實(shí)現(xiàn)水平垂直居中 ，CSS3彈性盒模型布局本身就不支持低版本IE6-9瀏覽器的兼容
<div class="maps4">
<div></div>
</div>
body,
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.maps4{
/** height:100%就是讓頁(yè)面撐滿整個(gè)可視區(qū) */
height: 100%;
/** 流行版彈性盒模型布局 */
display: flex;
display: -webkit-flex;
/** 老安卓版彈性盒模型布局 */
/** display: box;
display: -webkit-box;
/** 老安卓版的橫向居中 */
/**box-pack: center;
-webkit-box-pack: center;
/** 老安卓版的垂直居中 */
/**box-align: center;
-webkit-box-align: center;
/** 流行版的橫向居中 */
justify-content: center;
-webkit-justify-content: center;
/** 流行版的垂直居中 */
align-items: center;
-webkit-align-items: center;
}
.maps4 div {
width: 100px;
height: 100px;
background-color: black;
}
看代碼應(yīng)該是比較清晰的了沙庐，當(dāng)自己的筆記鲤妥，不喜勿噴！
