填充顶出奇怪的行为

问题描述：

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

答

要垂直居中，您需要使用绝对位置top: 50%; left: 50%; transform: translate(-50%,-50%);将其置于死区。

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 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 100%; 
 
}

<div class="alert"> 
 
    <p class="error">Error: Permission denied!</p> 
 
</div>

您还可以使用display: flex; justify-content: center; align-items: center;父居中孩子的死点。

body { 
 
    margin: 0; 
 
} 
 
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 { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div class="alert"> 
 
    <p class="error">Error: Permission denied!</p> 
 
</div>

再次，只是迂腐：这也将水平居中元素 - OP没有要求。在这种情况下，我认为这是他想要的。 – SamJakob

谢谢，但是当我使用* padding-top时，浏览器为什么不垂直居中：50％*？对我来说，这似乎应该工作得很好。 –

@SamMearns是的，你是对的，这是我想要的。 –

答

为中心，我建议你参考这个CSS-技巧文章： https://css-tricks.com/centering-css-complete-guide/

我都用这个，但是我已经跳过了父元素部分，因为父母是身体：

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

.alert { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    /* for Safari */ 
 
    -webkit-transform: translateY(-50%); 
 
} 
 

 
p.error{ 
 
    color: red; 
 
    padding: 5%; 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
    font-size: 300%; 
 
    box-shadow: 3px 3px 20px 3px #545454; 
 
    text-align: center; 
 
    background-color: #f1f1f1; 
 
    height: 100%; 
 
}

<div class="alert"> 
 
    <p class="error">Error: Permission denied!</p> 
 
</div>

注：我只垂直居中的元素，而不是水平太。

答

填充百分比指的是元素的宽度。这是W3 CSS盒模型规范的一部分：

http://www.w3.org/TR/CSS2/box.html#padding-properties

您将无法参考高度与填充百分比。它将始终指宽度。

你的意思是百分比总是相对于宽度而不是元素的高度？ – SamJakob

是的，那是对的：P. –

填充顶出奇怪的行为

相关推荐