CSS盒子水平居中設(shè)置

在CSS中，我們可以使用多種方法來將盒子水平居中，***常用的是利用CSS的flexbox布局，下面是一個(gè)簡單的示例：

HTML代碼：

<div class="container">
  <div class="box"></div>
</div>

CSS代碼：

.container {
  display: flex;
  justify-content: center;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為“container”的容器，其中包含一個(gè)名為“box”的盒子，我們將“container”設(shè)置為flex布局，并使用“justify-content: center;”將其子元素（即“box”）水平居中，我們還為“box”設(shè)置了寬度、高度和背景顏色。

運(yùn)行上述代碼后，你將看到一個(gè)紅色的盒子在容器中水平居中顯示，你可以根據(jù)需要調(diào)整盒子的尺寸和容器的寬度來測試不同的布局效果。