给body父级加相对位置反而实现不了垂直居中,为什么
本帖最后由 不二如是 于 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:00 编辑
父级relative，子集absolute，是一种定位技巧。
absolute定位后会脱离文档流（body），这样易于布局。
而此时如果它的父级是relative，那么虽然脱离文档流，但是都是相对于父级来进行定位。
去掉父级relative，为什么仍旧可以呢？
因为此时恰巧父级就是body，所以脱离文档流后仍旧是相对body进行定位。
假如有多个div嵌套，利用上面的定位，删掉后就无法实现哦～ 不二如是 发表于 2018-4-29 15:58
父级relative，子集absolute，是一种定位技巧。
absolute定位后会脱离文档流（body），这样易于布局。
我是疑问为什么我加了反而实现不了垂直居中,你们加了都行,我为什么就不行呢 本帖最后由 不二如是 于 2018-4-29 17:04 编辑
华丽转身123 发表于 2018-4-29 16:03
我是疑问为什么我加了反而实现不了垂直居中,你们加了都行,我为什么就不行呢
style一开始：
html,body{
height: 100%;
}
body没有高度，无法“撑开”，垂直布局
页:
[1]