CSS如何实现页面居中容器内内容左右两端对齐的布局效果

问题原因 #

现有代码不满足要求的核心问题有两点：

• .price-container未设置水平居中属性，无法在页面居中展示
• 采用float实现左右对齐时，父容器未清除浮动，易出现高度塌陷、布局错位，稳定性差

实现代码 #

HTML结构 #

原有结构已经支持动态数据渲染，{{ event.price }}占位符可被Vue/React等前端框架、Jinja/EJS等服务端模板引擎正常解析替换，无需调整：

<div class="price-container">
  <div class="price">price:</div>
  <div class="price-number">{{ event.price }}.00</div>
</div>

CSS样式 #

推荐使用Flex布局替代浮动实现对齐，代码更简洁、后续扩展更方便，完整样式如下：

.price-container{
   font-family: Montserrat;
   text-transform: uppercase;
   color: white;
   font-weight: 700;
   font-size: 20px;
   width: 90%;
   max-width: 400px;
   /* 容器水平居中 */
   margin: 0 auto;
   /* Flex布局实现子元素两端对齐 */
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* 按需添加内边距、背景即可，示例：padding: 1rem; background: #1a1a1a; border-radius: 8px; */
}

/* 原有.price、.price-number的float规则全部删除即可，不需要额外样式 */

效果符合项 #

• 动态渲染：价格占位符可正常绑定动态数据，数据变化时展示内容自动更新
• 容器规则：宽度自适应为父元素的90%，最大宽度400px，始终在页面水平居中
• 对齐规则：左侧"price:"文本靠左对齐，右侧价格数值靠右对齐，垂直方向居中，无浮动布局的错位问题

如果你需要兼容极老旧浏览器必须使用浮动方案，只需给.price-container新增margin: 0 auto; overflow: hidden;两条规则即可，但Flex方案是目前主流实现方式，适配98%以上的现代浏览器，更推荐使用。

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