[已解决]给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没有高度，无法“撑开”，垂直布局

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