绝对定位元素居中

基本思路

top:50%; left:50%;可以使元素的左上角处在居中位置，但并不是元素处于居中位置，这点要清楚。不过既然元素的左上角已经居中了。那么利用margin移动一下就可以让元素居中了。

例子

<meta charset="utf-8">
<div id="wrap">
    <div id="ce">居中</div></div>

<style>
#wrap{
    border:2px solid green;
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px;
}
#ce {
    border:2px solid  red;
    width:40px;
    height:40px;
    position: relative;
    top:50%;
    left:50%;
    margin-top: -20px;/*move top 20px*/
    margin-left: -20px;/*move left 20 px*/
}
</style>

结果，如下

image.png

参考

绝对定位的div,如何居中 - u012307002的专栏 - 博客频道 - CSDN.NET