填充顶部显示奇怪的行为

Question

我有以下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>

我的浏览器（Google Chrome版本57.0.2987.133）编译为： 我终于通过使用：

使它垂直居中 div

div.alert{
    padding-top: 22.5%;
}

通过进一步测试，我注意到浏览器使用宽度而不是 padding-top 的高度。

我的问题：为什么浏览器会像这样编译HTML代码？如何使用 50％使div垂直居中？ ？

Answer 1

Padding-top百分比是指元素的宽度。它是W3 CSS Box模型规范的一部分：

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

您将无法使用填充百分比来引用高度。它总是指宽度。

Answer 2

对于居中，我建议你参考这篇CSS-Tricks文章： https://css-tricks.com/centering-css-complete-guide/

我已经使用了这个，但是我跳过了父元素部分，因为父元素是正文：

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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：我只对元素进行垂直居中，而不是水平居中。

Answer 3

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

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您还可以在父母身上使用display: flex; justify-content: center; align-items: center;将儿童置于死点中心。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;