实例
<!DOCTYPE html>
<html>
<head>
<title>常用的四种对方方式</title>
<meta charset="utf-8">
<style type="text/css">
.nav1 {
width: 200px;
height: 200px;
background-color: #f0f0f0;
text-align: center;/*设置水平居中显示*/
display: table-cell; /*将.nav1转换成表格单元格，请可以便宜里面的块级元素剧中。*/
vertical-align: bottom;/*设置转换成的表格单元格，垂直居底部*/
vertical-align: middle;/*设置转换成的表格单元格，垂直居中显示*/
}
.nav1 ul {
list-style: none;/*清除ul默认样式*/
padding: 0;/*清楚ul默认的内边距*/
}
</style>
</head>
<body>
<div class="nav1">
<ul>
<li>PHP中文网</li>
<li>www.php.cn</li>
</ul>
</div>
<style type="text/css">
.nav2 {
width: 200px;
height: 200px;
background-color: red;
text-align: center; /*设置文本水平居中显示*/
}
.nav2 p {
line-height: 200px; /*设置文本垂直居中200px*/
margin: 0;
}
</style>
<div class="nav2">
<p>php中文网</p>
</div>
<style type="text/css">
.nav3 {
width: 200px;
height: 200px;
background-color: #888;
display: table-cell; /*将父元素转换成表格单元格*/
vertical-align: middle;/*将转换成元格单元格中的块级元素设置垂直居中*/
}
.nav3 .nav3_1 {
width: 100px;
height: 100px;
background-color: blue;
margin: auto;/*设置块级元素左右自动，让浮动居中*/
text-align: center;/*设置元素中的文本水平居中显示*/
line-height: 100px;/*设置元素中的文本垂直居中元素的高度*/
}
</style>
<div class="nav3">
<div class="nav3_1">php中文网</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
1、如果块级元素中有多行文本和有块级元素，将父元素转换成表格单元格。转换成表格单元格用display: table-call;用这个CSS转换成表格单元格。然后设置里面的文本vartical-align: middle;用这个就可以实现元素垂直居中。然后再设置一个text-align: center;设置文本水平居中。
2、水平居中与垂直居中都是在父元素里面来设置下面的子元素来居中的。所以要把居中的CSS写到父元素里面。
3、vartical-align:里面有2个参数，有垂直底部居中bottom，有垂直中部居中middle，这两个参数。
