display: flex; align-items: center;

`display: flex`是CSS3中的一个新属性，用于指定一个容器采用Flex布局。Flex布局是一种新的布局方式，可以方便地实现各种复杂的布局效果。而`align-items: center`是Flex布局中的一个属性，用于指定Flex容器中所有子元素在交叉轴上的对齐方式为居中对齐。

下面是一个使用`display: flex`和`align-items: center`的例子：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-color: #b3d4db;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #000;
  margin: 10px;
}

在上面的例子中，我们使用`display: flex`将`.container`元素设置为Flex容器，然后使用`align-items: center`将所有子元素在交叉轴上居中对齐。同时，我们还使用了`justify-content: center`将所有子元素在主轴上居中对齐。