html - 响应式布局的垂直居中

我在引导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>

最佳答案

您可以将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>

关于html - 响应式布局的垂直居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47018341/