效果描述： 之前给大家介绍过一个上下左右垂直居中的效果 相关链接如下：纯css实现div容器内图片上下左右居中效果 今天再给大家介绍一个部分基于css3的上下左右垂直居中效果 大家都知道给一个div设置相对定位，左侧、顶部的高度分别设置50% 剩下的靠margin解决，而margin只接受具体的数值，那么问题来了 当我们的div高度宽度在未知的情况下是无法使用margin的 那么这个时候可以用css3代码弥补这一问题： css3的t

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。

垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera…如发现问题有劳回复评论！ 复制代码代码如下:<!– *{margin:0;padding:0;border:none;font:12px Verdana,”宋体”;} #outer{height:400px;width:400px;display:table;background-color:#08f;

标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。 非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。 CSS 复制代码代码如下: body {padding: 0; margin: 0;} body,html{heigh