在网页制作中，有时候为了实现某一功能，需要将DIV盒子中的内容居中放置，不仅要水平居中，而且还要垂直居中。关于水平居中的方法都很简单，在此不做说明了，本网页重点介绍一下如何使用CSS技术实现DIV中的内容垂直居中的方法。下面我们郑州网站建设公司整理了几种利用CSS技术实现DIV中的内容垂直居中的方法，并附有垂直居中实现的代码。在本页所介绍的几种DIV内容垂直居中的方法，每种方法都有自己的优缺点，各位可以根据需要选择自己喜欢的方式。
一、设置line-height：
设置line-height与DIV的高度一致，这样，DIV中的文字在行内是垂直居中的，在DIV里也就起到了垂直居中的效果，代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV中的内容垂直居中（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
<style>
.divclass{ width:300px; height:200px; border:1px solid #CCCCCC; line-height:200px;}
</style>
</head>
<body>
<div class="divclass">垂直居中的文字</div>
</body>
</html>
二、设置:before样式：
我们可以在DIV的内容之前设置一定高度的空白，这样也能够起到让内容垂直居中的效果。而设置:before样式就能达到这个目的。下面是使用:before样式的代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV中的内容垂直居中（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
<style>
.divclass{ width:300px; height:200px; border:1px solid #CCCCCC;}
.divcontent:before { content:''; display: block; height:90px; }
</style>
</head>
<body>
<div class="divclass">
<span class="divcontent">垂直居中的文字</span>
</div>
</body>
</html>
三、设置margin-top：
我们可以在DIV的内容边界与外层DIV上边界留有一定高度的距离，这样也能够起到让内容垂直居中的效果。设置margin-top样式就可以达到这个效果，但有一点需要注意，外层DIV里的内容最好是块级元素，如DIV等，如果是span则应设置display:block。下面是使用margin-top样式设置的代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV中的内容垂直居中（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
<style>
.divclass{ width:300px; height:200px; border:1px solid #CCCCCC;}
.divcontent{ margin-top:90px; display: block; }
</style>
</head>
<body>
<div class="divclass">
<span class="divcontent">垂直居中的文字</span>
</div>
</body>
</html>
四、设置position:absolute：
设置position:absolute同样也可以做到让DIV的内容垂直居中，下面是设置position:absolute使得DIV中的内容垂直居中的代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV中的内容垂直居中（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
<style>
.divclass{ width:300px; height:200px; border:1px solid #CCCCCC; position:absolute;}
.divcontent{ position: relative; top:90px; }
</style>
</head>
<body>
<div class="divclass">
<span class="divcontent">垂直居中的文字</span>
</div>
</body>
</html>
五、设置padding-top：
设置padding-top也可以做到让DIV的内容垂直居中，这可以让DIV中的内容上面留白一段距离，下面是设置padding-top使得DIV中的内容垂直居中的代码，但DIV里的内容最好是块级元素，如DIV等，如果是span则应设置display:block。：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV中的内容垂直居中（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
<style>
.divclass{ width:300px; height:200px; border:1px solid #CCCCCC;}
.divcontent{ padding-top:90px; display:block;}
</style>
</head>
<body>
<div class="divclass">
<span class="divcontent">垂直居中的文字</span>
</div>
</body>
</html>
六、将display设置为display:table-cell;
将display设置为display:table-cell也可以做到让DIV的内容垂直居中，下面是设置display:table-cell使得DIV中的内容垂直居中的代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV中的内容垂直居中（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
<style>
.divclass{ width:300px; height:200px; border:1px solid #CCCCCC; display:table;}
.divcontent{ display:table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div class="divclass">
<span class="divcontent">垂直居中的文字</span>
</div>
</body>
</html>
