[转] 如何将div层中的内容垂直居中 --- http://hi.baidu.com/xigua366/blog/item/9f7c44b6a1ebc96b8bd4b24d.html
写的网页，很多地方都需要将div层中的内容垂直居中，以前自己采用的方式都是内补丁方式，即padding-top:npx; 但是这样做对于文字来说有很大的缺陷性，因为文字的大小font-size值若在用户访问的时候需要改变的时候采用padding-top方式来将文字垂直居中就显的力不从心了，网上很多网友都说如果是文字，可以采用line-height，但经过自己的测试，发现它和padding-top无多大区别，都是通过设置一个值让问题离div层的上边框分割出一定的距离，并不是真正意义上的垂直居中，例外还有一种可以考虑的方式，就是在div层中嵌套一个table，采用td标签的valign属性可以将内容（文字、图片、其它）真正意义上垂直居中，但是在一个div层嵌套一个talbe我觉得是一件很抽象的事情，既然是采用div+css布局，那么div再嵌套一个talbe，心里纠结的很。
div层中嵌套table来是内容垂直居中的demo代码如下
====================================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body{
text-align:center;
}
#div1{
height:200px;
width:300px;
border:1px solid red;
}
#td1{
font-size:50px;
}
</style>
</HEAD>
<BODY>
<div id="div1">
<table border="0" align="center" width="300" height="200" borderColor="blue">
<tr>
<td valign="middle" align="center" id="td1">你好！！</td>
</tr>
</table>
</div>
</BODY>
</HTML>
====================================================================================
如何将div层中嵌套的div垂直居中，我也费劲了脑子，网上搜了一大堆，经实践，最终还是将它们都归类为废话，很多网友说采用两个属性就可以了，即display:talbe-cell;vertical-align:middle; 自己试了发现没点效果，
但是现在我自己想出了很好的解决方法（仅是解决将div中div层垂直居中），具体方式仍然采用内补丁padding-top属性，只要写对了padding-top的值，那么就可以将内置div层垂直居中，具体算法是 值 = (父div层的高度height值-子div层的高度height值)/2；需要注意的是这里的div层的高度height值是包括了边框宽度的，所以前面公式是否正确的一个前提就是内层div没有使用外补丁margin属性，否则前面的公式算出来的值仍然是不正确的，具体demo代码如下：
====================================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#divdemo{
height:500px;
width:500px;
padding-top:150px; /* 这里的150=(500-200)/2 */
text-align:center;
border:1px solid red;
}
#div2{
height:200px;
width:300px;
border:1px solid blue;
}
</style>
</HEAD>
<BODY>
<div id="divdemo">
<div id="div2"></div>
</div>
</BODY>
</HTML>
====================================================================================
综上所述，目前对于将div层中的元素垂直居中仍没有根本性的解决方法，希望以后的css标准中能采用vertical-align:middle;一个属性就能将div层中的任何元素都能垂直居中。
浙公网安备 33010602011771号