<h3>多个div水平居中 - flex布局</h3>
<div class="container">
  <div class="center1">我想居中</div>
  <div class="center2">我也想居中</div>
</div>
.container {
  background-color: #e1e1e1;
  display: flex;
  justify-content: center;
  align-items: center;
}

div[class^=center] {
  background-color: pink;
  width: 100px;
  height: 100px;
/*   如果想要文字水平垂直居中，解开下面注释 */
/*   line-height: 100px;
  text-align: center; */
}

div div:nth-child(2) {
  background-color: yellow;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.