html - 在 flex children 中垂直居中内容

Question

使用 Flexbox 我有这个简单的例子..

.container {
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   height:100vh;
}

.box1{height:100%;background:green;}
.box2{height:100%;background:red;}
.box3{height:100%;background:yellow;}

<div class="container">
    <div class="box1">
        <img src="https://dummyimage.com/100x100/000/fff">
    </div>
    <div class="box2">
        This is some dummy text
    </div>
    <div class="box3">
        <img src="https://dummyimage.com/100x100/0020/66t">
    </div>
</div>

https://jsfiddle.net/y07xr5q3/1/

我希望每个 div 的内容都垂直居中，这是应该使用标准 CSS 技术完成的事情还是有特定于 flex 的方法来做到这一点？

Answer 1

步骤:

1. 使用 display: flex; 让您的子元素成为 flex 容器。
2. 使用 align-items: center 设置它们的垂直对齐方式。

必要的 CSS:

div.box {
  align-items: center;
  display: flex;
}

.container {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
}

.box {
  align-items: center;
  display: flex;
}

.box1{height:100%;background:green;}
.box2{height:100%;background:red;}
.box3{height:100%;background:yellow;}

<div class="container">
    <div class="box box1">
        <img src="https://dummyimage.com/100x100/000/fff">
    </div>
    <div class="box box2">
        This is some dummy text
    </div>
    <div class="box box3">
        <img src="https://dummyimage.com/100x100/0020/66t">
    </div>
</div>