如何在没有声明容器大小和没有JS的情况下将绝对定位文本垂直居中？

Question

我最初使用表格/表格单元格显示方法使文本垂直居中，效果很好。当我切换到容器的百分比高度，并使用块级图像(与相关文本同级)来设置容器的大小时，问题就出现了。在不声明静态容器大小的情况下，我无法再使绝对定位的文本等于容器高度。显然，使用JS解决这个问题很简单，但我不希望走这条路。

我还使用picturefill.js来提供图像，所以使用图像作为css背景是不可取的(除非任何人有建议让它工作)。

这里是小提琴：

http://jsfiddle.net/rHZdQ/

下面是代码：

HTML

<div class="tile">
  <a href="#">
    <img src="#">
    <div class="header-container">
      <h2>title</h2>
    </div>
  </a>
</div>

CSS

.tile {
  position: relative;
}

img {
  display: block;
}

a {
  display: block;
  position: relative;
}

.header-container {
  display: table;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

h2 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  z-index: 199;
}

Answer 1

使用CSS使绝对定位的图像覆盖中的文本居中

考虑以下HTML代码片段：

<div class="tile">
    <div class="image-container">
        <img src="http://placekitten.com/400/400">
    </div>
    <div class="header-container">
        <div class="panel">
            <h2><span>percentage sized div</span></h2>
        </div>
    </div>
</div>

并应用以下CSS规则：

.tile {
    border: 3px solid #555;
    position: relative;
    margin: 6px;
    float: left;
}
.image-container img {
    display: block;
    height: 100%;
    width: 100%;
}
.header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.header-container .panel {
    display: table;
    width: 100%;
    height: 100%;
}
.header-container .panel h2 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.header-container .panel h2 span {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.5);
}

父/包含块是div.tile，它有两个子元素，.image-container是流内的，.header-container是绝对定位的，因此是流外的。

由于.tile是浮点型的，因此它会缩小以适合.image-container中的图像内容，其尺寸由图像的原生高度和宽度决定。

为了创建覆盖，.header-container绝对位于其相对定位的父级的顶部和左侧，具有100%的宽度和高度，这迫使它延伸到包含块(参见黄色轮廓)。

在.header-container中，通过将display: table设置为.panel来创建匿名表，并指定100%的宽度和高度，以便扩展并填充.header-container。

最后，在.panel的嵌套<h2>元素上定义一个匿名表格单元格，并应用text-align: center和vertical-align: middle使文本帖子水平和垂直居中。

请注意，表格单元格将扩展表格的整个宽度和高度，因此，如果您想使用边框或背景设置文本样式，则需要将其包装为内联块元素(在我的示例中为<span> )。

你可以在上查看代码。

Answer 2

你的.header-container需要是width:100%吗？你能用像素代替吗？

如果您使用像素并执行以下操作，则它将居中：

.header-container {
  display: table;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  width: 400px;
  margin-left:-200px;
}

基本上，margin-left必须等于width的一半和fornt中的减号，然后是left:50%

更新：

在告诉我它必须只使用百分比之后，Jquery将是这样的：

$(document).ready(function() {

    var minus = '-';
    var headerwidth = $(".header-container").width();
    $(".header-container").css('margin-left',minus+(headerwidth/2)+'px');
    $(".header-container").css('left','50%');

});