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

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

来源：13-8 我就在那不动了-层模型之固定定位

慕UI0344854

2019-06-20 19:02

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

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

写回答关注

6回答

qq_慕容0063602

2019-11-23 14:51:03

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

0 0
慕前端6251868

2019-07-04 10:06:56

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

0 0
慕侠6342892

2019-06-22 16:29:26

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

1 0

慕UI034...

那请问 position: absolute; top: 0; bottom: 0; left: 0; right: 0; 在这里起到什么作用呢

2019-06-22 16:45:56

共 1 条回复 >
鼬神ss

2019-06-20 23:33:45

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

1 0

慕UI034...

哈哈好的?

2019-06-20 23:37:30

共 1 条回复 >

慕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>

代码如上!!

1 0

ly今夕何夕

首先你给他设置了“宽度” 遇上 margin:0 auto; 就会居中，一般页面都会给最外层的body设置，你记住这个属性就行，不要打破罐子问到底，就像为什么设置了wigth：500px; 他会有这么大一样；你把它当做一个属性就好

2019-07-30 22:45:00

共 1 条回复 >