父元素高度不确定的情况下怎么垂直居中

今天做项目的时候,遇到了这个问题,记得以前解决过,时间久了没用想不起来了,今天又查了下下面说说如何垂直居中

一、对于父元素高度不确定的文本、图片等的块级元素的竖直居中可以设置相同的上下内边距(padding值)即可实现居中,这个数值不必过大。

二、对于父元素高度确定的单行文本,可以对单行文本设置与父元素相同的行高(line-height)来实现。

三、父元素高度确定的多行文本、图片、块级元素的竖直居中,可以设置display的table-cell属性来设置,因为vertical-align只有在单元格中才有效,所以必须把display属性设置为table-cell才可以。问题是IE7及一下浏览器不支持这一属性,所以可以使用hack的方法或者直接使用table标签来实现。至于hack的方法,本文不详说了,需要的童鞋自己百度下~

 

原文链接:,转发请注明来源!

发表评论

  • 2 Responses to “父元素高度不确定的情况下怎么垂直居中”