margin-left，margin-top的用法

发布于
2016-05-15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            box-sizing: border-box;
        }
        .box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }
        .minBox {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 250px;
            height: 250px;
            /*margin-left: -125px;*/
            /*margin-top: -125px;*/
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="minBox"></div>
    </div>
</body>
</html>

当.minbox设置margin-left: -125px;margin-top: -125px;minbox就居中了，为什么？margin不是外边距吗？

css html

阅读 4.5k

2 个回答

wangfulin

子元素设置 position:absolute ，因为父元素的 position:relative ，所以子元素会相对于父元素定位，left 的值是 50%，这个 50% 是相对父元素的宽度，即 250px，所以没有设置 margin 之前子元素的左上角距离父元素的顶部和左边是 250px ,所以如图1，但是设置 margin-left:-125px 和 margin-top:-125px 之后，左上角距离父元素的顶部和左部的距离就变成 125px，刚好居中，如图2.