html - 相对于其垂直中心定位 div

Question

我有一条欢迎消息，需要将其中心定位在距窗口顶部 25% 的位置。因为它可以是任意多条线，所以需要使用其垂直中心来定位。这是我目前拥有的。

.welcomeMessage {
  position: absolute;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  margin: auto;
  width: 60%;
  top: 25%;
}

我尝试过使用display: inline-block 和display: flex 与vertical-align: middle 但都没有将div 相对于其垂直中心定位。任何帮助将不胜感激!

期望的定位: 目前定位:

Answer 1

在下面的代码片段中，我有两个元素，都设置为 position:absolute ，其中 top: 25% 和 left: 50% 。

• .element 为 transform: translate(-50%, -50%);这使得他能够“精确地”在页面尺寸(高度、宽度)的 25% 处垂直和水平居中。因为不像top和 left ，transform属性基于目标元素的大小。所以你设置的百分比是指目标边界框的大小。
另一方面，
• .other 没有 transform 规则，因此它的位置不像您想要的那样，它的顶部边框位于 25%<

.element,
.other {
  position: absolute;
  text-align: center;
  top: 25%;
  left: 50%;
}

.element {
  transform: translate(-50%, -50%);
  color: green;
}

.other {
  color: red;
}
html,body{
  height:100%;
  margin:0;
  padding:0;
}

<div class="element">I'm at 25% middle</div>
<div class="other">I'm not at 25% middle</div>