如何在页面中居中div？添加class="center"无法居中整个容器问题求助

无法居中的核心原因 #

• 你添加的center类通常仅包含text-align: center规则，该规则仅能控制行内/行内块元素的文本对齐，对你代码里带浮动属性的Bootstrap栅格列（col-md-5ths/col-xs-6）这类块级元素无效
• Bootstrap栅格的col-*类默认设置了float: left，浮动元素脱离常规文档流，普通文本居中规则无法作用于这类元素
• 你没有对栅格列的父容器做居中布局配置，仅靠子元素的文本居中属性无法让整个盒子居中

最简单的解决方法 #

给外层的.pricing-table容器添加Flex布局规则即可，不需要修改原有DOM结构：

.pricing-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 如果需要控制列之间的间距，可以加下面这条 */
  gap: 16px 2%;
}

如果需要兼容IE9及以下的老旧浏览器，可以用固定宽度+自动边距的方案：

1. 在外层所有栅格列外面额外套一个容器，比如<div class="pricing-container">
2. 给容器加样式：

.pricing-container {
  /* 宽度根据你的列总数调整，比如3个20%宽的列总宽度占60%，这里设65%预留间距即可 */
  width: 65%;
  margin: 0 auto;
}

注意：如果用Flex方案，原代码末尾的<div class="clear"></div>可以删除，Flex布局不需要清除浮动。

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