Question

我目前面临垂直对齐多个位置的问题：绝对div到中间。虽然我应用宽度：100％和高度：100％，但元素似乎也溢出。请帮帮我。谢谢。

<div class="wrapper">
  <div class="wrapper-inner">
    <div class="section-1">
      <h2>Heading Here</h2>
      <p>Some text here</p>
    </div>
    <div class="section-2">
      <p>Another text here.</p>
      <p>One more time.</p>
    </div>
  </div>
</div>

html,
body {
  width: 100%;
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper-inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.section-1 {
  position: absolute;
  left: 20vw;
  width: 40vw;
  background: #ccc;
}
.section-2 {
  position: absolute;
  left: 60vw;
  background: #375642;
  width: 40vw;
}

演示：https://codepen.io/rae0724/pen/jamzbX

我找不到一种方法可以在这个全屏高度的当前位置和中间位置制作这些内容，除了顶部：50％和减去它的高度，但它不好用响应。

Answer 1

尝试使用 CSS定位。像：

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.wrapper-inner {
  position: absolute;
  top: 50%;
  transform: translateY(-41px);
}

请看下面的代码段：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.wrapper-inner {
  position: absolute;
  top: 50%;
  transform: translateY(-41px);
}
.section-1 {
  position: absolute;
  left: 20vw;
  width: 40vw;
  background: #ccc;
}
.section-2 {
  position: absolute;
  left: 60vw;
  background: #375642;
  width: 40vw;
}

<div class="wrapper">
  <div class="wrapper-inner">
    <div class="section-1">
      <h2>Heading Here</h2>
      <p>Some text here</p>
    </div>
    <div class="section-2">
      <p>Another text here.</p>
      <p>One more time.</p>
    </div>
  </div>
</div>

希望这有帮助！

Answer 2

如果你需要从部分开始垂直居中所有课程，那么：

的 CSS：

div[class^='section-'], div[class*='section-']{ position: absolute; left: 20vw; width: 40vw; background: #ccc; top: 50%; transform: translateY(-50%); }

在%中添加top和transform值应该可以解决问题

如何垂直对齐中间到多个位置绝对子div

2 个答案: