html - 如何将div的内容与高度100vh中间对齐?-LMLPHP

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


我在围绕内容的外部div上使用了height:100vh,但是我无法使div内容在屏幕中间对齐。那怎么办呢?最外面的div是.components,内部的div是.row

最佳答案

我在下面做了一个简单的例子(希望我明白你想要什么)

只需在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>

关于html - 如何将div的内容与高度100vh中间对齐?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47334164/

10-12 12:54
查看更多