如何让三个Div元素同行排列且中间元素居中？

原代码使用float属性导致中间元素无法居中且宽度不足，核心原因是float属于流式布局，元素会按文档流紧密排列，无法自动分配剩余空间实现居中。以下是两种可行的调整方案：

方法一：使用Flexbox（推荐） #

Flexbox是现代CSS布局标准，能轻松实现元素的对齐与空间分配，代码简洁易维护，兼容性覆盖绝大多数现代浏览器。

修改后的代码： #

HTML

<div class="container">
  <div class="box1">
    <p>hello</p>
  </div>
  <div class="box2">
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
  <div class="box3">
    <p>Hello again</p>
  </div>
</div>

CSS

.container {
  display: flex;
  justify-content: space-between; /* 左右元素贴容器两端，中间元素占据剩余空间 */
  align-items: center; /* 可选：让三个元素垂直居中对齐 */
  width: 100%; /* 让容器占满父级宽度 */
}

.box2 {
  flex: 1; /* 让中间元素填充左右元素之间的剩余空间 */
  text-align: center; /* 让中间元素内的内容水平居中 */
}

/* 可选：给左右元素设置固定宽度，避免被挤压变形 */
.box1, .box3 {
  width: 150px;
}

方法二：调整Float布局（兼容旧浏览器） #

如果必须使用float，可以通过清除浮动、计算宽度和margin:auto实现居中，但需要明确左右元素的宽度，灵活性较差。

修改后的代码： #

HTML

<div class="container">
  <div class="box1">
    <p>hello</p>
  </div>
  <div class="box3">
    <p>Hello again</p>
  </div>
  <div class="box2">
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
</div>

CSS

/* 清除容器内浮动，避免高度塌陷 */
.container::after {
  content: "";
  display: table;
  clear: both;
}

.box1 {
  float: left;
  width: 150px; /* 固定左元素宽度 */
}

.box3 {
  float: right;
  width: 150px; /* 固定右元素宽度 */
}

.box2 {
  margin: 0 auto; /* 水平居中 */
  width: calc(100% - 300px); /* 减去左右元素总宽度，填充剩余空间 */
  text-align: center; /* 内容居中 */
}

注意：方法二中需要调整HTML顺序，将浮动元素放在中间元素前面，否则中间元素会被挤到下一行。

内容的提问来源于stack exchange，提问作者Eleanor Tran