浏览器窗口缩放时如何居中浮动DIV？

我明白你的困扰——浮动元素确实没有float:center这个属性，但咱们可以通过调整容器的布局方式来实现整体居中的效果，而且还能保留响应式缩放的特性。这里给你两种可行的方案：

方案一：使用Flex布局（推荐） #

Flex布局是现在实现响应式布局和居中最简洁的方式，完全可以替代浮动来排列元素，还能轻松实现居中。

修改后的CSS代码：

.infos_div {
  background-color: #FFF;
}

.infos_container_div {
  background-color: #9FC;
  display: flex; /* 转为flex容器 */
  flex-wrap: wrap; /* 允许元素换行 */
  justify-content: center; /* 水平方向居中对齐 */
}

.info_div {
  cursor: pointer;
  text-align: center;
  width: auto;
  height: auto;
  min-height: 80px;
  max-width: 30%;
  min-width: 200px;
  padding: 10px;
  margin: 10px;
  z-index: 1;
  background-color: #FFF;
  white-space: normal;
  /* 去掉float:left，flex布局不需要浮动 */
}

对应的HTML（修正了一处笔误：第五个.info_div的多余o属性）：

<div class="infos_div">
  <div class="infos_container_div">
    <div class="info_div">
      <strong>Feature 1</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 2</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 3</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 4</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 5</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 6</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
  </div>
</div>

原理说明： #

• 把.infos_container_div设置为flex容器后，它里面的.info_div会自动成为flex项目；
• flex-wrap: wrap保证窗口缩小时元素会自动换行，保留响应式特性；
• justify-content: center让所有flex项目在容器内水平居中，完美解决你的问题。

方案二：基于浮动的传统方法（兼容旧浏览器） #

如果你需要兼容不支持flex的旧浏览器，可以用这种方法：

.infos_div {
  background-color: #FFF;
  text-align: center; /* 让内部inline-block容器居中 */
}

.infos_container_div {
  background-color: #9FC;
  display: inline-block;
  text-align: left; /* 重置内部文本对齐，避免影响内容 */
}

.infos_container_div::after {
  content: "";
  clear: both;
  display: table;
}

.info_div {
  display: inline-block;
  cursor: pointer;
  float: left;
  text-align: center;
  width: auto;
  height: auto;
  min-height: 80px;
  max-width: 30%;
  min-width: 200px;
  padding: 10px;
  margin: 10px;
  z-index: 1;
  background-color: #FFF;
  white-space: normal;
}

原理说明： #

• 给外层.infos_div设置text-align: center，让内部的inline-block类型的.infos_container_div居中；
• 给.infos_container_div添加清除浮动的伪元素，避免容器高度塌陷；
• 重置.infos_container_div的text-align: left，防止内部文本被意外居中。

两种方案都能实现你要的效果，推荐优先用Flex布局，它的代码更简洁，维护性也更好~

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