34

我有一个包含两个子 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+ 和其他常用的现代浏览器。

4

7 回答 7

44

我更喜欢在上述答案之上使用转换。

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%);
}
于 2015-09-15T11:20:17.760 回答
29

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

我display: table-cell;为了使用而使用vertical-align: middle;

于 2013-08-01T14:20:28.040 回答
6

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

或尝试display:table-cell与vertical-align.

于 2013-08-01T14:13:37.347 回答
2

除了使用 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为文本保持足够的高度。

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

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

于 2013-08-01T15:25:17.950 回答
1 
<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>

这应该有效。

于 2021-02-17T21:59:22.957 回答
0 
    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/

于 2013-08-02T06:46:06.587 回答
0

在子元素中将高度和宽度设为 100%。这是孩子将占据父母的整个空间并且vertical-align:middle财产将起作用。我在 parent 是 a<div>而 child 是 a的情况下使用它<table>。表格被标记为高度和宽度为 100%。

于 2018-09-15T13:10:27.327 回答