第一种方法 :
.demo{ height:400px; position:relative;}
.d{ width:200px; height:200px; position: absolute; left: 50%; top: 50%; margin-top: -100px;/* 高度的一半 */ margin-left: -100px;/* 宽度的一半 */ background:red;}
<div class="demo">
<div class="d"></div>
</div>
这种写法 比较常用
第二种方法 :
.demo{ height:400px; position:relative;}
/* CSS3 兼容问题 优势:不需要知道元素宽度 */
.transform{ width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);/* 50%为自身尺寸的一半 */ background:green;}
<div class="demo">
<div class="transform"></div>
</div>
PS: 这种写法的好处是 无需知道 元素的 高度和宽度。
第三种方法 :
.demo{ height:400px; position:relative;}
.position{width: 200px; height: 200px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了这个就自动居中了 */ background:black;}
<div class="demo">
<div class="position"></div>
</div>