鍍金池/ 問答/HTML/ CSS實(shí)現(xiàn)垂直居中問題

CSS實(shí)現(xiàn)垂直居中問題

<!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中的第一個(gè)為什么必須html,body{}，我只規(guī)定了body{},瀏覽器就不會(huì)顯示子元素，只單單指定body為父元素不行嗎？

回答
編輯回答
不討囍

去掉html，因?yàn)槟阍O(shè)置的是百分比的，沒有高度。如下圖所示，雖然全屏背景顏色還是olive，這個(gè)是瀏覽器比較特殊的一點(diǎn)，當(dāng)html不設(shè)置背景時(shí)，body的背景將作為整個(gè)瀏覽器的背景色，但實(shí)際上body的高度為零。

clipboard.png

2018年1月9日 07:13
編輯回答
醉淸風(fēng)

因?yàn)槟阍O(shè)定body的 “height: 100%;” 的時(shí)候，是參考他的父級(jí)（html）的高度，當(dāng)你html沒有設(shè)置內(nèi)容高度的話，body的高度 = html的高度*100% ，當(dāng)然body也沒有高度了。由于你body里面的盒子寬高都用的百分比，所以都沒有高度，就看不見了。

2017年5月28日 08:21