html - 响应式布局垂直居中

Question

我在 bootstrap 3 列内的内容 div 上使用类 .vertical-align-center。

如果列的高度是固定的，所以它大于内容的高度，或者如果同一行中的其他列有更大的内容使得高度大于内容，都可以正常工作。

但在较小的设备上，我将列宽设置为 12，因此列的高度与内容相同。这会使内容从顶部偏离 -50%。

有什么解决办法吗？

.vertical-align-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

<div class="column col-xs-12 col-sm-12 col-md-6 col-lg-6">
  <div class="column-content vertical-align-center">
    <h3>Heading</h3>
    <p>Some text</p>
  </div>
</div>

Answer 1

您可以使用 flex 来解决这个问题。喜欢

body,html {
  height: 100%;
}

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

<div class="Aligner">
  <div class="Aligner-item">
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, qui.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed itaque voluptatum fuga aspernatur consectetur ipsum porro corporis autem commodi totam beatae atque doloremque possimus hic sunt, dolores ullam quod ducimus.</p>
  </div>
</div>