[分享]css两个层水平排列并居中

在网页设计中，常常需要将两个层水平排列并居中。这时，我们可以利用CSS的flexbox布局来实现。以下是实现的具体方法。 /将容器设置成flex/ .container { display: flex...

在网页设计中，常常需要将两个层水平排列并居中。这时，我们可以利用CSS的flexbox布局来实现。以下是实现的具体方法。

/*将容器设置成flex*/
.container {
  display: flex;
  justify-content: center; // 横向居中
  align-items: center; // 纵向居中
}

/*分别设置两个层*/
.box1 {
  width: 50%;
  height: 300px;
  background-color: #eee;
}

.box2 {
  width: 50%;
  height: 300px;
  background-color: #ddd;
}

/*HTML结构*/
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div> 

在上述代码中，我们设置了一个名为.container的容器，将其设置成flex，然后通过justify-content和align-items属性将其横向纵向居中。最后，我们利用.box1和.box2分别设置两个层，设定宽度、高度和背景颜色。HTML结构中，则按照.container、.box1、.box2的顺序排列。