CSS中实现DIV容器垂直居中_html/css_WEB-ITnose

1.vertical-align：middle 垂直对齐

如表格元素中的

、 、等，而像

、这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

2.text-align:center  文本水平居中

 

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

ExampleSourceCode 

DIV{   height:25px;   line-height:25px;   overflow:hidden;  //使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行 }    不过在InternetExplorer6及以下版本中，这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把

完全填充的一种访求而已。可以使用类似下面的代码： DIV{   padding:25px;   }  

这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。