CSS实现垂直居中问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
background: olive;
position: relative;
width: 100%;
height: 100%;
}
/* 大小和颜色 */
.fa {
width: 70%;
height: 70%;
background:navy;
}
.son {
width: 50%;
height: 50%;
background: #999;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="fa center">
<div class="son center">
</div>
</div>
</body>
</html>
style中的第一个为什么必须html,body{}，我只规定了body{},浏览器就不会显示子元素，只单单指定body为父元素不行吗？
jeck猫2回答
-
Qyouu
因为你设定body的 “height: 100%;” 的时候，是参考他的父级（html）的高度，当你html没有设置内容高度的话，body的高度 = html的高度*100% ，当然body也没有高度了。由于你body里面的盒子宽高都用的百分比，所以都没有高度，就看不见了。 -
翻过高山走不出你
去掉html，因为你设置的是百分比的，没有高度。如下图所示，虽然全屏背景颜色还是olive，这个是浏览器比较特殊的一点，当html不设置背景时，body的背景将作为整个浏览器的背景色，但实际上body的高度为零。
随时随地看视频慕课网APP
相关分类
JavaScript