css - 在具有固定像素边距的响应框中垂直居中可变长度内容？

Question

我正在寻找一种最简单的方法来实现一种看起来很简单的布局:

...但实际上涉及很多标准，其中许多涉及非平凡的 CSS 问题:

1. div 中垂直居中的内容...
2. ...其中内容的长度可变(因此不能硬编码到顶部和底部的距离)...
3. ...其中 div 在选定的 float div 中...
4. ...其中这些 div 具有百分比宽度以在响应式布局中填充屏幕...
5. ...每个 div 之间有一个固定的像素间隙...
6. ...其中 div 具有纯色背景颜色或图像，而 div 背后的背景不是可以重新应用的已知纯色

其中的各种元素已在单独的问题中解决(例如 vertically aligning floated divs 和 pixel gaps between responsive percentage-width divs )，但我找不到将它们组合起来的任何东西。

最简单的方法:

1. 尽可能少的 HTML 包装器
2. 最少的额外 Javascript(如果可能的话没有)
3. 当断点改变每行的 div 数量时需要改变的最小 CSS
4. 最少的代码、怪癖或脆弱的 CSS 技巧(例如，依赖于将来可能会改变的浏览器怪癖)
5. 最少的跨浏览器问题(理想情况下，应在 IE8+ 上工作，并使用最少的 IE 特定标记)

Answer 1

这是我能想到的最简单的方法。下面的代码片段。它基本上是一种现有方法，用于垂直居中 float ，将背景放在中间包装上，并使用外包装上的填充而不是使用 box-sizing: border-box; 的边距设置固定像素间隙。

JSBIN demo

1. 每个 block 三个 HTML 元素 - 这似乎是任何内部内容没有已知高度的垂直居中 float 内容的最小值。
2. 没有JS
3. 只需更改 % 宽度即可更改每行的 block 数
4. 如果文本内容对于 div 来说太大，div 会稍微扩展而不破坏布局 - overflow: hidden; 如果不需要，可以应用
5. 在 IE8 上运行没有问题(如果有任何可怜的灵魂仍然需要支持 IE7，在 IE7 上会失败)

.box-outer {
  box-sizing: border-box;
  float: left;

  /* editable */
  width: 50%;
  height: 110px;
  padding: 1px 1px 0px 0px; /* sets gap */
  /* Padding does't collapse like margins - 1px all round gives 2px gaps */
}

.box {
  width: 100%;  
  height: 100%;
  box-sizing: border-box; 
  display: table; /* height doesn't fill without display: table */

  /* editable: */
  background: #99ffff;
  padding: 8px;
}

.box-inner {
  vertical-align: middle;
  display: table-cell;
}

.boxes-container {
  padding: 0px 0px 1px 1px; /* opposite of each box's padding */

  /* editable: */
  background: #ffffff url('http://freedesignfile.com/upload/2012/10/sky_clouds_03.jpg');
}

<div class="boxes-container clearfix">
 
  <h2>  Title </h2>
  
  <div class="box-outer">
    <div class="box">
      <div class="box-inner">
        Box content
      </div>
    </div>
  </div>

  <div class="box-outer">
    <div class="box">
      <div class="box-inner">
        Box with longer content
      </div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box">
      <div class="box-inner">
        Box
      </div>
    </div>
  </div>
  
  <div class="box-outer">
    <div class="box">
      <div class="box-inner">
        Box with significantly longer textual content
      </div>
    </div>
  </div>

  <br/>
  <p style="text-align: center;"> <--- responsive width ---> </p>
  
</div>