保持浮动 div 居中在窗口调整大小 css答案

【问题标题】：Keep floating div centered on window resize css保持浮动 div 居中在窗口调整大小 css
【发布时间】：2015-02-23 08:42:33
【问题描述】：

我们能否在 div 中仅使用 CSS 调整窗口大小时将浮动 div 居中？

我的容器 div 是 100% 宽度，里面包含 3 个固定宽度的 div。我需要在调整窗口大小时将内部 div 居中。

有没有办法通过仅使用 CSS 来做到这一点？

【问题讨论】：

你可以做到。但没有浮动。

标签： html css

【解决方案1】：

是的，有几种不同的方式：

三个可浮动的 div 宽度为 33.333%
容器 div 可以设置为display:table，包含的 div 可以设置为display:table-cell。

【讨论】：

【解决方案2】：

如果您发布一些代码会有所帮助。但盲目地建议你将divs 设置为display: inline-block 并将text-align: center 添加到父容器中。

示例 HTML

<div class="container">
  <div class="box"></div>
  <div class="box"></div>    
  <div class="box"></div>
</div>

示例 CSS

.container{
  width: 100%;
  text-align: center;
}

.box{
  background: red; //random value
  height: 100px;  //random value
  width: 100px; //random value
  display: inline-block;
}

EXAMPLE FIDDLE

【讨论】：