Question

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

这里有两个目标：

水平对齐两个子div，我分别使用float: left和float: right来实现。
相对于父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。

Answer 4

除了使用CSS表之外，您还可以使用绝对定位来获得类似的布局。

按原样使用您的HTML（无额外元素），请应用以下CSS：

html, body {
    height: 100%;
    width: 100%;
    font-size: 13px;
}
.parent {
    background-color: grey;
    height: 20%;
    line-height: 1.6em;
    font-size: 1.6em;
    min-height: 1.6em;
    position: relative;
}
.left, .right {
    position: absolute;
    top: 50%;
    margin-top: -0.8em;
}
.left {
    background-color: yellow;
    padding-left: 20px;
    left: 0;
}
.right {
    background-color: red;
    padding-right: 20px;
    right: 0;
}

您可以在http://jsfiddle.net/audetwebdesign/cByHa/

看到演示小提琴

在.parent容器中，将line-height设置为显式值（1.6em作为字体大小），position: relative和min-height以保持文本的足够高度。< / p>

两个子元素.left和.right绝对位于top: 50% 并使用margin-top: -0.8em获得垂直居中（使用行高值的一半）。

使用左右偏移（或填充）根据需要调整子元素的水平位置。

Answer 5

<div style="position:relative;white-space:nowrap">
  <img style="visibility:hidden; width:1px; height:100%; verticle-align:middle" />
  <img src="the-image-url" style="position:relative;left:-1px;" />
</div>

这应该有效。

Answer 6

    html, body {
    height: 100%;
    width: 100%;
    font-size: 13px;
}

.parent {
    height: 50px;
    background-color: grey;
    font-size: 1.6em;
}

.left {
    margin-left: 2%;
    float: left;
    background-color: yellow;
    height:100%;   
}

.right {
    margin-right: 2%;
    float: right;
    background-color: red;
    height:100%;    
}
.parent span{
    display:table;
    height:100%;
}
.parent em{
    display:table-cell;
    vertical-align:middle;

}

http://jsfiddle.net/yX3p9/13/

Answer 7

在子元素中将高度和宽度设为100％。这是孩子将占据父级的整个空间，并且vertical-align:middle属性将起作用。我在父母是<div>而孩子是<table>的情况下使用它。桌子被标记为高度和宽度为100％。

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

7 个答案: