使用float元素时margin auto失效，如何居中容器实现响应式布局

根本原因 #

margin: auto水平居中的规则仅适用于常规文档流中的定宽块级元素，浮动元素脱离了常规文档流，浏览器不会为浮动元素自动计算margin的剩余空间分配，因此设置margin: auto不会生效。

适配float布局的响应式居中方案 #

根据你的代码场景，提供以下3种纯浮动体系下的实现方案，不需要修改整体浮动布局逻辑：

方案1：父容器padding实现（适配多个子浮动元素整体居中） #

你的main.whole容器为100%宽，两个.part1总宽度为80%，剩余20%宽度可通过父容器左右padding平分实现子元素整体居中，天然支持响应式：

.whole {
  /* 剩余20%宽度左右各分配10% */
  padding: 0 10%;
}

无需修改.part1原有float: left的属性，窗口缩放时会自动保持居中效果。

方案2：百分比margin实现（适配单个浮动元素居中） #

如果仅需要让单个浮动的.part1居中，可直接通过百分比margin计算左侧偏移量，百分比基于父容器宽度，天生响应式：

.part1 {
  /* 原有属性保留，新增以下规则 */
  /* 居中偏移量 = (父容器宽度 - 自身宽度)/2 = (100% - 40%)/2 = 30% */
  margin-left: 30%;
}

如果是两个并排的.part1要整体居中，可调整为：

/* 第一个子元素左侧留10%，两个子元素中间留10%间距 */
.part1:first-of-type {
  margin-left: 10%;
  margin-right: 10%;
}

总宽度计算：10% + 40% + 10% + 40% = 100%，刚好填满父容器，整体居中。

方案3：清除浮动回归常规流居中（适配单独居中的特殊元素） #

如果某一个元素不需要和其他浮动元素并排，可单独清除浮动、取消浮动属性后使用margin: auto居中，不影响其他元素的浮动布局：

.part1.is-center {
  float: none;
  clear: both;
  margin: 0 auto;
}

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