问答详情
源自：13-8 我就在那不动了-层模型之固定定位

请问该操作为什么能实现垂直居中?

.father{
    position:relative;
}
.son{
    position:absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0; 
    bottom: 0;
}

以上操作可以实现垂直居中,但是我不明白为什么会这样.

提问者：慕UI0344854 2019-06-20 19:02

个回答

  • qq_慕容0063602
    2019-11-23 14:51:03

    这个position: absolute;是让他绝对定位， top: 0; bottom: 0;  left: 0 right: 0;        这个就是让他左右上下距离相等，这样已经居中了，为零就是让他边距变大，就像四边有人扯一块布一样


    0
  • 慕前端6251868
    2019-07-04 10:06:56

    看不懂 不过可以肯定的是 SON是子元素 FATHER 是父元素 用前面看过的 定位 父绝子相

    0
  • 慕侠6342892
    2019-06-22 16:29:26

    auto：浏览器计算外边距，所以说你更改任意一个参数都会导致异常

    0
  • 鼬神ss
    2019-06-20 23:33:45

    研究了半天我也没搞明白，明天我查到答案了再和你说?

    0
  • 慕UI0344854
    2019-06-20 22:39:54

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位居中测试</title>
    <style>
        .father{
            background: red;
            width: 100%;
            height: 600px;

            /*关键点*/
 position: relative;
        }
            .father > .son{
                background: blue;
                width: 50%;
                height: 45%;

                /*关键点,为什么以下这些操作可以使盒子居中?更改或者删除其中任意一个参数都会导致异常?这里的margin:auto;起到了什么作用??*/
 position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

    代码如上!!

    0
  • 鼬神ss
    2019-06-20 22:19:38

    有完整代码么，可以帮你看下

    0