如何在主div中居中三个分别包含段落的子div？

你当前用float的方式虽然能让子div并排，但很难实现整体居中，还容易引发布局塌陷问题。下面是几种简洁可靠的实现方式：

方法一：Flexbox（现代布局首选） #

给主div设置display: flex，配合相关属性实现水平居中，子div可统一样式避免重复代码：

/* 主容器样式 */
.main-div {
  display: flex;
  justify-content: center; /* 实现子元素水平居中 */
  gap: 20px; /* 子div之间的间距，可选 */
  /* 如果需要垂直居中，添加以下两行 */
  /* height: 300px; */
  /* align-items: center; */
}

/* 子div统一样式 */
.main-div > div {
  font-family: 'Kanit', sans-serif;
  color: aliceblue;
  width: 30%;
  text-align: center;
  padding-top: 40px;
}

对应HTML结构示例：

<div class="main-div">
  <div class="first"><p>段落1</p></div>
  <div class="second"><p>段落2</p></div>
  <div class="third"><p>段落3</p></div>
</div>

方法二：Grid布局 #

通过Grid的列布局快速实现居中效果：

.main-div {
  display: grid;
  grid-template-columns: repeat(3, 30%); /* 定义三列，每列占30%宽度 */
  justify-content: center; /* 整体水平居中 */
  gap: 20px; /* 子div间距 */
}

.main-div > div {
  font-family: 'Kanit', sans-serif;
  color: aliceblue;
  text-align: center;
  padding-top: 40px;
}

方法三：修正原有float方案（不推荐，仅作兼容参考） #

如果一定要保留float写法，需给主div清除浮动并设置居中：

.main-div {
  width: 90%; /* 可设固定值如900px，需大于三个子div宽度总和 */
  margin: 0 auto; /* 实现主div水平居中 */
  overflow: hidden; /* 清除浮动，防止父容器高度塌陷 */
}

.main-div > div {
  font-family: 'Kanit', sans-serif;
  color: aliceblue;
  width: 30%;
  float: left;
  text-align: center;
  padding-top: 40px;
}
/* 把原third的float:right改成left，避免右侧多余间距 */
.main-div .third {
  float: left;
}

关于你尝试的display: table代码 #

display: table是让元素模拟HTML<table>的布局特性，单独使用它无法实现你要的三个子div居中效果，通常需要配合display: table-cell等属性模拟表格单元格布局，但这种方式现在已被Flexbox和Grid替代，不适合这类弹性布局场景。

内容的提问来源于stack exchange，提问作者Filip Moslavac