javascript - 如何在没有 JavaScript 的情况下在流体容器中垂直居中文本？

Question

我有一个基于流体百分比的容器，其中包含一个包含标题的 div。每当调整浏览器大小或视口更改时，我希望此标题始终保持垂直定位在此容器的中心。是否有可能在没有 JavaScript 的情况下完成这种垂直重新定位？

<div class="fluid-container">
    <div class="meta">Title</div>
</div>

Answer 1

这是我最喜欢的方法。我使用两个辅助类来实现这个目标：

.valign:after {
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: '';
}
.valign > .valigned {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

现在，当您需要垂直对齐某些东西时，只需将valign类添加到父元素和valigned实际元素即可。像这样：

<div class="fluid-container valign">
    <div class="meta valigned">Title</div>
</div>

http://jsfiddle.net/dfsq/MQMEZ/

Answer 2

如果你知道“title”标签的高度，或者你可以用line-heightand设置它height，你可以这样做：

.fluid-container {
  position: relative;
}
.fluid-container > .meta {
  width: 100%;
  height: 20px;
  line-height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  text-align: center;
}

示例：http: //jsfiddle.net/Yjy5C/2/

Answer 3

您可以（ab）使用line-height、inline-block和vertical-align:middle来获得所需的效果。它适用于所有体面的浏览器。（我曾经在这里发现过这种技术）

.fluid-container {
    line-height: 8em; /* some abundant value, around the max height */
}
.fluid-container > div.meta {
    vertical-align: middle; /* center… */
    display: inline-block; /* …like text */
}