Css中Div层文字垂直水平居中的方法
最近在修改模板Css样式的时候，总是遇到过很多的重复问题。比如说Css样式中Div层文字（单行和多行）垂直水平居中，这个问题我是遇到很多次，但是每次遇到新的同样的问题，又忘了怎么写Css代码。所以这里总结分享一下Css中Div层文字垂直水平居中的方法，希望自己能牢牢记住并且能帮助有需要的朋友。
Div层中单行文字垂直水平居中的方法
将Div的高度与文字的行高一样就OK了，即 line-height 和height 的数值一样。下面例子是以行高和高度100为例子，就轻松实现单行文字垂直水平居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 单行文字实现垂直水平居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
width: 600px;/*宽度*/
height:100px;/*高度*/
line-height:100px;/*行高*/
margin:0 auto;/*层水平居中*/
text-align:center; /*文字居中*/
background : #F4E9FC;/*背景颜色*/
}
</style>
</head>
<body>
<div>Div层中单行文字垂直水平居中的方法中</div>
</body>
</html>
Div层中多行文字垂直水平居中的方法
将Div层设定 padding-bottom 和 padding-top 的值一样的就可以实现多行文字垂直水平居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直水平居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
width: 600px;/*宽度*/
margin:0 auto;/*层水平居中*/
text-align:center; /*文字居中*/
background : #F4E9FC;/*背景颜色*/
padding-top: 120px;/*上内边距*/
padding-bottom: 120px; /*下内边距*/
}
</style>
</head>
<body>
<div>多行文字实现垂直水平居中<br>
Div层中多行文字垂直水平居中的方法中</div>
</body>
</html>
