两大方法实现DIV垂直居中
hitris 2010-08-16
在说到DIV垂直居中这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？本文和大家分享一下DIV水平居中的几种方法。
Hack技术就可以啊！所以在这里我还要铝骄洌CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<DIV>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
DIV垂直居中的几种方法
一、单行DIV垂直居中
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
如：
DIV{
height:25px;
line-height:25px;
overflow:hidden;
} 这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。更多CSS教程。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>单行文字实现垂直居中</title>
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletypestyletype="text/css">
body{font-size:12px;font-family:tahoma;}
DIV{
height:25px;
line-height:25px;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<DIV>现在我们要使这段文字垂直居中显示！</DIV>
</body>
</html>
二、多行未知高度文字的DIV垂直居中
如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<DIV>完全填充的一种访求而已。可以使用类似下面的代码：
DIV{
padding:25px;
} 
相关推荐
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 0喜欢 / 0评论 2020-04-14
STPace 0喜欢 / 0评论 2020-02-17
Simagle 0喜欢 / 0评论 2015-05-27
impress 0喜欢 / 0评论 2019-07-01
Dorissun 0喜欢 / 0评论 2016-09-22
ThikHome 0喜欢 / 0评论 2015-05-27
linfei0 0喜欢 / 0评论 2015-02-01
AnyBisks 0喜欢 / 0评论 2013-07-02
云端漂移 0喜欢 / 0评论 2013-03-20
CoderChang 0喜欢 / 0评论 2012-11-20
统一开发环境UDE 0喜欢 / 0评论 2012-08-31
teresalxm 0喜欢 / 0评论 2011-08-16
xtuhcy 0喜欢 / 0评论 2011-05-11
lovehuayud 0喜欢 / 0评论 2011-04-06
tivon仔 0喜欢 / 0评论 2010-09-10
Ladyseven 0喜欢 / 0评论 2010-09-07
林一天 0喜欢 / 0评论 2010-09-01
Ladyseven 0喜欢 / 0评论 2010-08-31
tivon仔 0喜欢 / 0评论 2010-08-17
MoeRookie 0喜欢 / 0评论 2010-08-17
ZiXuanFY 0喜欢 / 0评论 2006-09-24
W3C CSS 0喜欢 / 0评论 2016-10-18