原文链接
vertical-align属性只会在inline-block的元素上起作用,但是其影响到的元素涉及到inline元素,inline元素受vertical-align属性影响而位置改变等不是因为其对vertical-align属性起作用,而是受制于整个line box的变化
1.单行文本垂直居中
设置文本高度height和所在行的高度line-height相等。
使用overflow:hidden防止内容超出容器或产生自动换行,这样就无法达到垂直居中效果了。
2.多行未知高度文本的垂直居中
1)padding
设置padding,使上下的padding值相同即可。
前提:容器的高度必须是可伸缩的。
2)绝对定位
#content {
position:absolute;
top: 50%;
transform: translateX(-50%);
}
3.多行文本固定高度的垂直居中
1)vertical-align属性
CSS中的vertical-align属性只对拥有valign特性的(X)HTML标签起作用,幸运的是,CSS中还有一个display属性可以模拟<table>
,从而可以使用vertical-align。
注意:display:table
和display:table-cell
的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此要为需要定位的文本添加一个父元素<div>
。
不幸的是IE 6 及更低版本并不能正确地理解display:table
和display:table-cell
2)绝对定位
适用于固定文案
<style type="text/css">
#wrap {
position:relative;
}
#content {
position:absolute;
top: 50%;
margin-top: content高度的一半
}
</style>