实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #098877;
text-align: center;/** 使得行内元素在块级元素中 水平居中 */
}
.box1 a{
line-height: 200px;/** 一个块级元素中 有一个行内元素 就这样设置 然后就可以水平 垂直居中了 */
}
.box2{
width: 200px;
height: 200px;
background-color: #098877;
text-align: center;/** 使得行内元素在块级元素中 水平居中 */
/**
* 上边是让内部元素 水平居中
*/
/**
* [display description]将display属性 由block 改为 table-cell； 然后设置居中
* @type {[type]}
*/
display: table-cell;
/**
* [align description]设置table-cell之后就可以设置垂直居中了
* @type {[type]}
*/
vertical-align: middle;
}
.box3{
width: 200px;
height: 200px;
background-color: #098877;
display: table-cell;
vertical-align: middle;
}
.box3 .child{
width: 100px;
height: 100px;
background-color: #bb996c;
margin: auto;
}
.box4{
width: 200px;
height: 200px;
background-color: #098877;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
.box4 ul{
/**
* [padding description] 为什么这里是padding 而不是 margin ；知道了 从浏览器检查元素可以看出来
* @type {[type]}
*/
padding: 0px;
/*line-height: 200px;*/
}
.box4 li{
list-style: none;
display: inline;
}
</style>
</head>
<body>
<h4>父元素是块级元素，根据子元素不同，有以下几种对其</h4>
1、子元素是行内：如 a span <br>
a、水平居中在父元素上设置 text-align：center； <br>
b、垂直居中 在行内元素设置行高与父元素高相等 line-height
<div class="box1">
<a href="">php测试</a>
</div>
<hr>
2、子元素是多行内联/行内文本
a、水平居中在父元素上设置 text-align：center； <br>
b、垂直居中：在父元素上设置display：table-cell；属性 vertical-align: middle;
<div class="box2">
<a href="">php测试</a>
<br>
<a href="">php测试</a>
</div>
<hr>
3、子元素是块元素的时候：<br>
a、水平居中：在子元素上设置左右自动：margin：auto；
b、垂直居中：在父元素上设置display：table-cell；属性 vertical-align: middle;
<div class="box3">
<div class="child"></div>
</div>
4、子元素不定宽的元素：最常见的就是分页导航
a、水平居中在父元素上设置text-align:center;
b、垂直居中：使ul得行高等于父元素的高度 设置middle 就可以垂直居中
c、底边对齐：常用,与多行文本处理方式是一样的
<div class="box4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
