我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐，彼此相邻。其中一个图像需要在div中绝对定位。
要在所有常见浏览器上工作，需要什么样的CSS ?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
当前回答
默认情况下，h1是一个块元素，将在第一个img之后的行上呈现，并将导致第二个img出现在块之后的行上。
为了阻止这种情况发生，你可以将h1设置为内联流行为:
#header > h1 { display: inline; }
至于绝对定位img在div中，你需要设置包含div的“已知大小”，这样才能正常工作。在我的经验，你还需要改变位置属性从默认位置:相对工作为我:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
如果你能让它工作，你可能想尝试逐步从div.header中删除高度、宽度、位置属性，以获得获得你想要的效果所需的最小属性。
更新:
下面是一个在Firefox 3上运行的完整示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Example of vertical positioning inside a div</title> <style type="text/css"> #header > h1 { display: inline; } #header { border: solid 1px red; position: relative; } #img-for-abs-positioning { position: absolute; bottom: -1em; right: 2em; } </style> </head> <body> <div id="header"> <img src="#" alt="Image 1" width="40" height="40" /> <h1>Header</h1> <img src="#" alt="Image 2" width="40" height="40" id="img-for-abs-positioning" /> </div> </body> </html>
其他回答
要将块元素定位到中心(适用于Internet Explorer 9及以上版本)，它需要一个包装器div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
哇，这个问题很受欢迎。这是基于对垂直对齐属性的误解。这篇优秀的文章解释了这一点:
理解垂直对齐，或者Gavin Kistner的“如何(不)垂直居中内容”。
“如何在CSS中居中”是一个很好的网络工具，它可以帮助您在不同的情况下找到必要的CSS居中属性。
简而言之(并防止链接腐烂):
Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example For block elements, vertical alignment is harder and strongly depends on the specific situation: If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example … there are more such special cases.
.outer {
display: flex;
align-items: center;
justify-content: center;
}
现在Flexbox的支持正在增加，这个CSS应用到包含元素将垂直居中所有包含的项目(除了那些指定对齐本身的项目，例如align-self:start)
.container {
display: flex;
align-items: center;
}
如果你还需要针对ie10和更老版本(< 4.4 (KitKat))的Android浏览器，请使用带前缀的版本:
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
几乎所有的方法都需要指定高度，但通常我们没有任何高度。
这里有一个css3的三行技巧，它不需要知道高度。
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
甚至在IE9中也支持它。
与其供应商前缀:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
来源:垂直对齐任何只需3行CSS
