如何使元素垂直居中

• 通过设置 display: table-cell ，并且设置宽高，就可以实现里面元素的垂直居中对齐。 table-cell 不能继承父级的宽高，除非父级是 table 。因为要自适应，所以宽度不能定死，于是父级定义我为 display: table 。 图片要能等比缩放， max- 100%, height: auto; 这是按宽来缩放，max-width 会导致 IE8 下图片消失，所以加上 auto9 。 IE6/7 不支持 table-cell ，可以使用 inline-block 来触发 hasLayout ，这样也能实现垂直居中对齐。

.parent{ display: table; 100%} .parent .child{ display: table-cell; text-align: center; vertical-align: middle} .parent .child img{ max- 100%; height: auto; auto9}这是按宽等比缩放图片并且垂直居中对齐。 Parent 的高度通过 js 实时更新如果出现图片 http://img.f2e.taobao.net/img.png?x=100x390，高很高的情况下，图片将按原来尺寸撑开 table-cell 。除非给 table-cell 定死高，否则需要加入一个样式在打破 table 的盒模式。 .parent.vertical{ display: block; text-align: center;} .parent.vertical .child{ display: inline-block; *display: block; *zoom: 1} .parent.vertical .child img{ max- none; max-height: 100%; auto; } 

• 通过设置 display: inline-block ，不设置宽高，而是在在父节点下在添加一个 b 标签来定义高度，就可以实现垂直居中。 图片要能等比缩放， max- 100%, height: auto; 这是按宽来缩放，max-width 会导致 IE8 下图片消失，所以加上 auto9 。 对于高度太高的图片则需要设置父节点的高度，否则就只需要定义 b 标签的高度。 

<div class=“parent”><b></b><div class=“child”><img src=“”/></div></div> .parent{ display: block; 100%;} .parent .child{ display: inline-block; *display: inline; *zoom: 1; text-align: center; vertical-align: middle} .parent .child img{ max- 100%; height: auto; vertical-align:middle;} .parent b{ 1px;overflow: hidden; margin-left: -1px;vertical-align: middle; display: inline-block; *display: inline; *zoom: 1}如果是按宽等比缩放 则设置 b 的高度。如果是按高等比缩放 则设置 parent 的高度。这 2 个高度是一致的。