前端如何设置3列固定宽度居中型布局

前端设置三列固定宽度的居中布局通常可以采用Flexbox或者Grid布局技术来实现。这里分别介绍两种方法：

**1. 使用 Flexbox:**
HTML结构：

<div class="container">
  <div class="column">列1</div>
  <div class="column">列2</div>
  <div class="column">列3</div>
</div>

CSS样式：

.container {
  display: flex;
  justify-content: center; /* 居中 */
}

.column {
  width: 30%; /* 每列宽度为总宽度的33.3% */
  box-sizing: border-box; /* 包含边框和内填充，保证固定宽度 */
}

**2. 使用 CSS Grid:**
HTML结构：

<div class="container">
  <div class="grid-item">列1</div>
  <div class="grid-item">列2</div>
  <div class="grid-item">列3</div>
</div>

CSS样式：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 列数为3，等分总宽度 */
  justify-items: center; /* 居中 */
}

.grid-item {
  padding: 10px; /* 可选：添加内间距 */
}