我有以下的HTML代码:填充顶出奇怪的行为
p.error {
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
height: 100%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
}
div.alert {
padding-top: 50%;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>
我的哪个浏览器(谷歌浏览器版57.0.2987.133)编译成这样: 我终于拿到了它通过以下方式垂直居中div:
div.alert{
padding-top: 22.5%;
}
通过进一步测试,我发现浏览器使用宽度而不是高度来填充填充顶部。
我的问题:为什么浏览器编译HTML代码是这样,我怎么能得到它的垂直居中div
使用50%的?
这里只是迂腐:它不被称为“编译”HTML代码 - 它是渲染。 – SamJakob
另外,为什么div的高度设置为100%?编辑:不要担心,误读 – SamJakob