相对于垂直中心定位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 with vertical-align：middle但是div都没有相对于垂直中心的位置。任何帮助将不胜感激！

理想的定位： 目前的定位：

Answer 1

使用transform:translate(-50%);

margin: auto;不适用于inline-block元素，因此您需要添加left:50%以使其横向居中。

＆＃13;

＆＃13;

html,body{
  height:100%;
  margin:0;
  padding:0;
}

.welcomeMessage {
  position: absolute;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  left:50%;
  width: 60%;
  top: 25%;
  transform:translate(-50%);
}

＆＃13;

<div class="welcomeMessage">Welcome Message</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

• .element为transform: translate(-50%, -50%);，允许他在页面尺寸（高度，宽度）的25％处垂直和水平＆＃34;确切地＆＃34; 居中。因为与top和left不同，transform属性基于目标元素的大小。因此，您设置的百分比是指目标边界框的大小。
另一方面，
• .other没有transform规则，因此它的位置不像您想要的那样，其顶部边界位于25％

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

这应该可行。我将h1的大小定义为2em并计算最高位置，使用字体大小的一半减少25％。

.container {
  width: 100vw;
  height: 100vh;
  background: lightgray;
}

.h1 {
  font-size: 2em;
}

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

<div class="container"></div>
<h1 class="welcomeMessage">Welcome</h1>