控制元素居中核心代码为
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
css：
/* 容器 */
.wrap {
position: relative;
height: 600px;
width: 500px;
border: 1px solid #ccc;
margin: 0 auto;
}
/* 需要居中的元素 */
.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: absolute;
left:;
right:;
top:;
bottom:;
margin: auto;
text-align: center;
line-height: 200px;
}
html：
<div class="wrap">
<div class="box">
我是居中的元素
</div>
</div>
效果如下：
注：如果需要元素相对于整个页面居中可使用 固定定位 position: fixed; 或者其所有父级元素均不使用定位。