如何将div的内容与高度100vh对齐？

Question

.components{
    background-color: #1DA1F2;
    text-align: left;
     height: 100vh;
     padding: 20px;
 }

我在外部div上使用了高度：100vh，它围绕内容，但我无法在屏幕中间对齐div内容。怎么办？最外面的div是.components，内部div是.row

Answer 1

我在下面做了一个简单的例子（希望我明白你想要的）

只需在display:flex;align-items:center上添加.components即可。我使用了bootstrap，但只是为了让cols并排。无论你如何安排你的布局，引导程序，display:flex都可以正常工作

.components {
  background-color: #1DA1F2;
  text-align: left;
  height: 100vh;
  padding: 20px;
  display:flex;
  align-items:center;
}

.row {
  width:100%;
}
.col-sm-4 {
  background:red;
  height:50px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="components">
  <div class="row">
    <div class="col-xs-4">
      col
    </div>
    <div class="col-xs-4">
      col
    </div>
    <div class="col-xs-4">
      col
    </div>
    <div class="col-xs-4">
      col
    </div>
    <div class="col-xs-4">
      col
    </div>
    <div class="col-xs-4">
      col
    </div>
  </div>
</div>