[已解决]给body父级加相对位置反而实现不了垂直居中,为什么

华丽转身123 · 发表于 2018-4-29 15:47:31

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2018-4-29 15:56 编辑

<!doctype html>
<html>
        <head>
                <meta charset="utf-8"/>
                <style type="text/css">
                        html{
                                height: 100%;
                        }
                        body{
                                background: url(img/162464.jpg) center center;
                                background-size: cover;
                                margin: 0;
                                padding: 0;
                                position: relative;
                        }
                        #container{
                                position: absolute;
                                top: 50%;
                                width: 100%;
                                text-align: center;
                                transform: translateY(-50%);
                        }
                </style>
                
        </head>
        <body>
                <div id="container">
                        <h1 style="font-family:'微软雅黑';">我爱鱼C</h1>
                        <p>bbs.fishC.com - 编码改变生活</p>
                        <p><a href="http://bbs.fishc.com">传送门</a></p>
                </div>
        </body>
</html>

**************************************************************
如果把body里的position:relative注释掉就能实现垂直居中了,不二如是老师的代码里是要求加上去的才能实现

最佳答案

月排行榜 / 总排行榜

不二如是

2018-4-29 16:52:11

本帖最后由不二如是于 2018-4-29 17:04 编辑

华丽转身123 发表于 2018-4-29 16:03
我是疑问为什么我加了反而实现不了垂直居中,你们加了都行,我为什么就不行呢

style一开始：
html,body{
height: 100%;
}

body没有高度，无法“撑开”，垂直布局

跳转到最佳答案楼层

不二如是 · 发表于 2018-4-29 15:58:38

本帖最后由不二如是于 2018-4-29 16:00 编辑

父级relative，子集absolute，是一种定位技巧。

absolute定位后会脱离文档流（body），这样易于布局。

而此时如果它的父级是relative，那么虽然脱离文档流，但是都是相对于父级来进行定位。

去掉父级relative，为什么仍旧可以呢？

因为此时恰巧父级就是body，所以脱离文档流后仍旧是相对body进行定位。

假如有多个div嵌套，利用上面的定位，删掉后就无法实现哦～

华丽转身123 · 发表于 2018-4-29 16:03:44

不二如是发表于 2018-4-29 15:58
父级relative，子集absolute，是一种定位技巧。

absolute定位后会脱离文档流（body），这样易于布局。

我是疑问为什么我加了反而实现不了垂直居中,你们加了都行,我为什么就不行呢

不二如是 · 发表于 2018-4-29 16:52:11

本帖最后由不二如是于 2018-4-29 17:04 编辑

华丽转身123 发表于 2018-4-29 16:03
我是疑问为什么我加了反而实现不了垂直居中,你们加了都行,我为什么就不行呢

style一开始：
html,body{
height: 100%;
}

body没有高度，无法“撑开”，垂直布局

账号		自动登录	找回密码
密码			立即注册