                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)

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

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

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

慕UI0344854

2019-06-20

源自：初识HTML(5)+CSS(3) 13-8

关注问题我要回答

1165

操作

收起

6 回答

qq_慕容0063602
2019-11-23

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

0 回复有任何疑惑可以回复我~

收起回答

慕前端6251868
2019-07-04

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

0 回复有任何疑惑可以回复我~

收起回答

慕侠6342892
2019-06-22

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

0 回复有任何疑惑可以回复我~

收起回答

慕UI0344854 提问者

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

2019-06-22 回复有任何疑惑可以回复我~

鼬神ss
2019-06-20

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

0 回复有任何疑惑可以回复我~

收起回答

慕UI0344854 提问者

哈哈好的?

2019-06-20 回复有任何疑惑可以回复我~

慕UI0344854 提问者
2019-06-20

<!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 回复有任何疑惑可以回复我~

收起回答

ly今夕何夕

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

2019-07-30 回复有任何疑惑可以回复我~