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

【问题标题】：Vertically centre variable-length content inside responsive boxes with fixed-pixel margins?在具有固定像素边距的响应框中垂直居中可变长度内容？
【发布时间】：2023-04-02 23:32:01
【问题描述】：

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

...但实际上涉及很多标准，其中很多都涉及到不平凡的 CSS 问题：

div 中垂直居中的内容...
...内容长度可变（因此不能硬编码从顶部和底部的距离）...
...div 位于浮动 div 的选择范围内...
...这些 div 具有百分比宽度以填充响应式布局上的屏幕...
...每个 div 之间存在固定像素间隙...
...其中 div 具有纯色背景颜色或图像，并且 div 后面的背景不是可以重新应用的已知纯色

这方面的各种元素已在单独的问题中得到解决（例如 vertically aligning floated divs 和 pixel gaps between responsive percentage-width divs），但我找不到将它们组合在一起的任何内容。

最简单的意思：

尽可能少的 HTML 包装器
最少的额外 Javascript（如果可能，没有）
当断点改变每行 div 的数量时需要更改的最小 CSS
最少的代码、怪癖或脆弱的 CSS 诡计（例如，依赖未来可能会改变的浏览器怪癖）
最少的跨浏览器问题（理想情况下，应该在 IE8+ 上使用最少的 IE 特定标记）

【问题讨论】：

这样的？ jsfiddle.net/lollero/q3snm1w4
哈，我想在基于表格的布局时代有些事情更容易！但是，问题在于，如果您添加一个响应式断点，在该断点之上每行需要 3 个块，或 4 个，或者在其之下每行需要一个块，则需要 JS 来完全重构表格，将 <td>s 移动到不同的行并添加或删除<tr>s

标签： css responsive-design

【解决方案1】：

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

JSBIN demo

每个块三个 HTML 元素 - 对于内部内容没有已知高度的任何垂直居中浮动内容来说，这似乎是最小值。
没有 JS
只需更改 % 宽度即可更改每行的块数
如果文本内容对于 div 来说太大，则 div 会稍微扩展而不会破坏布局 - 如果不希望这样做，可以应用 overflow: hidden;
在 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>

【讨论】：