css三分栏居中

CSS三分栏居中是一个比较常用的布局方式，可以将网页的内容分为三栏，并让它们在网页中居中显示。接下来，我们将来介绍如何使用CSS来实现三分栏居中布局。

首先，我们先来编写HTML代码，将内容分为三个块，分别为左栏、中间栏和右栏，代码如下：

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div> 

然后，我们来编写CSS代码，将这三个块的宽度设置为33.33%（因为是三栏布局），并将它们设置为浮动状态，代码如下：

.container {
  width: 100%;
}

.left,
.middle,
.right {
  width: 33.33%;
  float: left;
} 

但此时，三个块会贴在网页的左边缘，并没有居中对齐。接下来，我们需要将它们居中对齐，代码如下：

.container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.left,
.middle,
.right {
  width: 33.33%;
  float: left;
} 

通过设置display为flex和justify-content为center，可以将三个块在网页中居中对齐。

最后，我们可以为三个块设置背景颜色和高度，代码如下：

.container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.left,
.middle,
.right {
  width: 33.33%;
  float: left;
  height: 100px;
}

.left {
  background-color: red;
}

.middle {
  background-color: green;
}

.right {
  background-color: blue;
} 

至此，我们成功地实现了CSS三分栏居中布局。