的更新

Question

免责声明：我不相信这是重复的，因为我使用相对尺寸来生成全屏网格布局而不使用px。

问题：在这个jsFiddle http://jsfiddle.net/X3ZDy/73/中，我有四个相同比例的盒子。它们的设计跨越屏幕宽度并保持正方形。其中包含一些样本方形DIV（40％x 40％）。我正在努力获得lbl内水平和垂直居中的文字标签bbl。

我见过（并尝试过）的所有示例都不起作用，因为它们要求我知道标签的高度，或者他们使用浏览器限制的table-layout技巧。我需要按照小提琴的所有相对尺寸来做这件事。

有人可以帮忙吗？我需要使用纯CSS（无JS）解决方案来处理所有浏览器。令我感到惊讶的是，在div中垂直对齐文本似乎非常棘手。我不介意我们使用块或内联元素作为文本标签。

请注意，我不是在寻找一个TABLE解决方案，这是一个DIV＆amp; CSS拼图需要一个有效的jsFiddle。

更多： 感谢所有人的答案，但是对于未来的海报，请注意（width == padding-bottom）是允许我的DIV 方的神奇之处。它是网格布局系统的关键，所以我需要保持这一点。

更新使用相对尺寸并没有固定的高度非常棘手，但我想我终于找到了问题的答案（下图）。

Answer 1

我想我终于找到了有效问题的答案。问题在于，当孩子的体型发生变化且没有任何高度可知时，我所看到的几乎所有其他解决方案都无法应对。我需要这个来为响应性全％设计工作，在任何地方都没有固定的高度。

我偶然发现了这个答案Align vertically using CSS 3，这是我的灵感。

vertically centered text

首先，使用全％设计，您需要一个零高度包装元素作为父元素中的定位占位符;

<body>
<div class="container">
    <div class="divWrapper">
        <div class="tx">This text will center align no matter how many lines there are</div>
    </div>
</div>
</body>

在这种情况下，我的容器是一个简单的盒子瓷砖;

.container
{
    margin:2%;
    background-color:#888888;
    width:30%;
    padding-bottom:30%; /* relative size and position on page  */
    float: left;
    position:relative;  /* coord system stop */
    top: 0px; /* IE? */
}

所以没有什么特别的，除了它有没有高度这使得这个中心元素的一般问题变得棘手。它需要绝对定位，以便我们可以在子元素中使用定位坐标（我认为这可能需要IE中的“顶部”）。

接下来，绝对定位的包装器将完全覆盖父元素并完全填充。

.divWrapper
{
     position:absolute;
     top:0px;
     padding-top:50%; /* center the top of child elements vetically */
     padding-bottom:50%;
     height:0px;
}

填充意味着任何子元素都将从父元素的正中间开始，但此包装器本身没有高度，并且页面上不占用空间。

还没有新的东西。

最后，我们想要居中的子元素。这里的诀窍是让子元素根据它的自己的高度垂直向上滑动。您不能使用50％，因为父容器的50％不是自己的。看似简单的答案是使用转换。我不敢相信我之前没有发现过这个;

.tx
{               
    position: relative;
    background-color: transparent;
    text-align: center; /* horizontal centering */

    -webkit-transform: translateY(-50%); /* child now centers itself relative to the  midline based on own contents */
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5,  SizingMethod="auto expand")'; /*IE8 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5,  SizingMethod='auto expand'); /*IE6, IE7*/
    transform: translateY(-50%);    
}

这是Fiddle

但是，我没有在IE6 +上测试过这个，所以如果有人想验证我的Matrix变换，我会很感激。

的更新

事实证明甚至不需要包装器。这就是正确垂直居中所需的一切;

.tx { width:100%; // +1 to @RonM position: absolute; text-align: center; padding-top:100%; -webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */ -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0)'; /*IE8 */ filter: progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0); /*IE6, IE7*/ transform: translateY(-50%); }

并更新了Fiddle

但是仍然没有在IE6中工作 - 看看那些变换，我认为如果没有JavaScript，我不认为这可以做到。

Answer 2

不要自虐;让IE7去...... :)（根据this，并没有很多人使用它。）

我用两种方法拍了一张照片，一张使用display: table，另一张使用line-height。不幸的是，我无法访问PC，所以它们仅在Mac 10.8.1，iOS 6.0.1 Safari和iOS模拟器5.0和5.1 Safari上的Chrome 25.0.1365.1 canary，FF 18和Safari 6.0中进行了测试。

display: table方法在iOS模拟器5.0和5.1上存在问题，文本不是垂直居中的。

根据quirksmode，display:table方法应该与IE8及更高版本兼容。 Theorectically，行高法可能与IE 6/7兼容。

要在每个方格内创建居中框，我将.box6设置为position: relative并将.bc样式更改为：

.bc  {
    position:absolute;
    top: 30%;
    bottom: 30%;
    left: 30%;
    right: 30%;
    overflow: hidden;
}

每种方法都会在.bc元素内创建一个非常高的容器，其静态高度。静态高度的确切值是任意的，它只需要高于它将包含的内容。

display: table方法将.bbl和.bbl .lbl样式更改为：

.bbl {
  display: table;
  height: 500px;
  padding-top: 50%;
  margin-top: -250px;
  background-color: blanchedalmond;
  width: 100%;
}

.bbl .lbl {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

对于line-height方法，HTML为：

<div class="bc">
    <div id="line-h-outter">
        <span id="line-h-inner">a lot more text than in the other blob. The quick brown fox jumped over the lazy dog</span>
    </div>
</div>

CSS：

#line-h-outter {
  line-height: 500px;
  vertical-align: middle;
  margin-top: -250px;
  padding-top: 50%;
}

#line-h-inner {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

http://jsfiddle.net/X3ZDy/93/

Answer 3

现实情况是，HTML中唯一具有本机流体垂直对齐的标签是表格单元格。

CSS没有任何可以满足你想要的东西。不是今天。

如果要求是： 1.适用于每个浏览器 2.流体高度 3.垂直居中 4.没有脚本 5.没有桌子 6.您今天想要解决方案，而不是几年

您剩下1个选项： 1.放弃您的一项要求

否则这个“谜题”是不可完善的。这是您的请求唯一完全可以接受的答案。

...如果只有我可以获得这次特殊挑战浪费时间的所有工资：）

Answer 4

标题应为 Centering in the Unknown ; - ）

我使用表格更新了您的示例：http://jsfiddle.net/uWtqY/并且文本在您使用表格描述的框内对齐，但您不希望这样。

添加了一个表格，如：

<table width="100%" height="100%"><tr><td>One line</td></tr> </table></div>

在<div class="lbl">

内

仅用于跨浏览器支持。

修改

在做了一些研究后，确实很难在百分比内对齐元素。尝试了很多东西但你的代码我不确定它是否适合所有这些的设计。换句话说，我的意思是你可能首先需要构建垂直对齐，然后尝试使用百分比。根据我在这个领域的经验，我了解到一个好的方法是从内部元素开始设计，然后在复杂性增加时出去。因此，在所有内容中使用百分比可能不是最佳实现（并且在进入移动设备时不是这样）。

编辑2

在与我的几个合作伙伴合并并真正了解HTML领域后，答案很明确。要么你支持＆lt; IE7和你使用表格或鬼元素或跨度，你使用几个帖子中描述的所有tequniques，你可以支持＆gt; = IE7。另一种选择是为每个浏览器使用特定的结构。

我认为链接可以解释它并且标题很好（基本上就是你需要的）：

- ＆GT; Centering in the Unknown

希望最好的。

PS。链接供参考：

http://web.archive.org/web/20091017204329/http://www.zann-marketing.com/developer/20050518/vertically-centering-text-using-css.html

http://css-tricks.com/vertically-center-multi-lined-text/

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

如果有帮助请告诉我

Answer 5

我更新了css以使用＆＃34; spacer＆＃34;类。它被放置在你的＆＃34; bc＆＃34; div和彩色盒子里面。这给了我我认为你要求的效果。

html:
<div class="rgCol boxCol box6" style="background-color:lightgray">
        <div class="spacer"></div>
        <div class="bc">


css
.spacer {width:100%;padding-bottom:30%;display:block; }

我将垫片填充30％，然后移动你的＆＃34; bbl＆＃34;的绝对左侧位置。 div为30％（从2％）。 blanchdelemond盒子保持其形状和大小。

http://jsfiddle.net/X3ZDy/37/

Answer 6

今天我偶然发现了类似的问题 - 对于具有预先设置宽度的正方形div的垂直和水平居中子元素（使用填充技术将它们设置为sqare）。我必须在保持纵横比的同时将其用于图像，但将子项更改为任何目标元素都很简单。

对于这种情况，没有行高，边距/填充或显示：table-cell变通方法是合适的。但是有一个使用margin: auto的解决方案。

HTML：

<div class="squareContainer>
    <div class="contentWrapper">
        <img class="imagePreview" alt="Image preview" src="//URL.jpg">
    </div>
</div>

CSS：

div.squareContainer {
    position: relative;
    box-sizing: border-box;
    height: 0;
    padding-bottom: 25%;
    width: 25%;
}
div.contentWrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}
img.imagePreview {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;  /* This is the important line */
    max-height: 90%;
    max-width: 90%;
}

有用的资源：

http://jsfiddle.net/mBBJM/1/

http://codepen.io/HugoGiraudel/pen/ucKEC

希望有所帮助！

Answer 7

你可以毫不费力地解决这个问题（也许有一天他们会修复CSS盒子模型，但直到那时）：

<table>
<tr>
<td width="50" height="50" align="center" valign="middle">text</td>
</tr>
</table>

这就是它的全部内容。选择您的宽度和高度，将其放入div并称之为好。

从不使用表格的想法是一个非常糟糕的指导方针，以至于自我侮辱。

Answer 8

你的意思是这样吗？

<div class="mycontainer">
  <div class="rgRow">
    <div class="rgCol" style="background-color:pink">
      <div class="boxCol">BOX1</div>
    </div>
    <div class="rgCol" style="background-color:lightgray">
      <div class="boxCol">
        <div class="boxLabel">a lot more text than in the other blob. The quick brown fox jumped over the lazy dog</div>
      </div>
    </div>
    <div class="rgCol" style="background-color:maroon">
      <div class="boxCol">
        <div class="boxLabel">One liner</div>
      </div>
    </div>
    <div class="rgCol" style="background-color:yellow">
      <div class="boxCol">BOX4</div>
    </div>
  </div>
</div>


.mycontainer
{
    background-color: #000000;
    display: inline-table;
}

.rgRow
{
    width: 100%;
    display: table-row;
}

.rgCol
{
    width: 25%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

.boxCol
{
    display: inline-block;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.boxLabel
{
    text-align: center;
    vertical-align: middle;
    background-color: blanchedalmond;
    overflow: hidden;
    margin: 2%;
    width: 96%;
    height: 96%;
}

麻烦（垂直）使用相对％大小调整在另一个DIV中居中文本

8 个答案:

的更新

并更新了Fiddle