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

Question

我有一个基于流动百分比的容器，其中有一个包含标题的 div。我希望每当调整浏览器大小或视口(viewport)更改时，此标题始终保持垂直定位在该容器的中心。是否可以在没有 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/