如何在流体布局中垂直居中父div内的子div的内容

Question

我有一个包含两个子div的div,它们是流体布局的一部分,因此我无法在px中为它们设置固定大小.

这里有两个目标:

1. 水平对齐两个子div,我分别使用float: left和float: right.

2. 使文本(在子div中)相对于父div垂直居中.文字简短,设计一行.

我现在拥有的:http://jsfiddle.net/yX3p9/

显然,两个子div不占用父div的全高,因此它们的文本不是相对于父div垂直居中.

从概念上讲,为了实现上述目标,我们可以使子div在父div中垂直居中,或者我们可以使子div占据父div的整个高度.这样做的有效方法是什么？

*浏览器支持:IE 9+和其他常见的现代浏览器.

Answer 1

我更喜欢在上面的答案之上使用变换.

top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

根据我的经验,它适用于许多情况和所有主流浏览器(甚至是IE9 +).

如果您使用SCSS,您甚至可能希望实现此mixin:

@mixin v-align($position: absolute){
    position: $position;  top: 50%;  
    transform: translateY(-50%);
    -ms-transform:translateY(-50%); /* IE */
    -moz-transform:translateY(-50%); /* Firefox */
    -webkit-transform:translateY(-50%); /* Safari and Chrome */
    -o-transform:translateY(-50%);
}

Answer 2

我更新了你的小提琴:http://jsfiddle.net/yX3p9/7/

我用display: table-cell;它来使用vertical-align: middle;

Answer 3

使用line-height.如果它只是一行文本,则高行高将有效地将文本定位在行的中间.

或者尝试display:table-cell结合使用vertical-align.