为了账号安全,请及时绑定邮箱和手机立即绑定

CSS实现垂直居中问题

CSS实现垂直居中问题

jeck猫 2019-03-05 12:19:42
<!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为父元素不行吗?
查看完整描述

2 回答

?
Qyouu

TA贡献1786条经验 获得超11个赞

因为你设定body的 “height: 100%;” 的时候,是参考他的父级(html)的高度,当你html没有设置内容高度的话,body的高度 = html的高度*100% ,当然body也没有高度了。由于你body里面的盒子宽高都用的百分比,所以都没有高度,就看不见了。


查看完整回答
反对 回复 2019-03-18
?
翻过高山走不出你

TA贡献1875条经验 获得超3个赞

去掉html,因为你设置的是百分比的,没有高度。如下图所示,虽然全屏背景颜色还是olive,这个是浏览器比较特殊的一点,当html不设置背景时,body的背景将作为整个浏览器的背景色,但实际上body的高度为零。

https://img1.sycdn.imooc.com//5c8efb2d00010b5808000305.jpg

查看完整回答
反对 回复 2019-03-18
  • 2 回答
  • 0 关注
  • 458 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号