实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的四种对齐方式总结</title>
<style type="text/css">
.box1{
height: 200px;
width: 200px;
background-color: #e5252c;
text-align: center;
margin:50px;
border-radius: 20px;
box-shadow: 4px 4px 6px #c7c7c7;
}
.box1 a{
line-height: 200px;
text-decoration:none;
color: #fff;
font-style: italic;
font-size: 18px;
}
.box3{
margin:50px;
}
.box2{
height: 200px;
width: 400px;
background-color: #e5252c;
text-align:center;
border-radius: 20px;
box-shadow: 4px 4px 6px #c7c7c7;
display: table-cell;
vertical-align: middle;
}
.box2 span{
line-height: 30px;
color: #fff;
font-style: italic;
font-size: 18px;
}
.box4{
height: 200px;
width: 200px;
background-color: #e5252c;
text-align:center;
border-radius: 20px;
box-shadow: 4px 4px 6px #c7c7c7;
display: table-cell;
vertical-align: middle;
}
.box4 .child{
height: 50px;
width: 50px;
margin: auto;
background-color: #ffce44;
border-radius: 50%;
}
.box5{
height: 200px;
width: 200px;
background-color: #e5252c;
text-align: center;
border-radius: 20px;
box-shadow: 4px 4px 6px #c7c7c7;
display: table-cell;
vertical-align: bottom;
}
.box5 ul{
margin: 0;
padding: 0;
line-height: 30px;
}
.box5 li{
list-style: none;
display: inline;
color: #fff;
}
</style>
</head>
<body>
<!-- 子元素为行内元素
水平居中：在父元素设置text-align:center
垂直居中: 在行内元素上设置行高与父元素相同：line-height -->
<div class="box1">
<a href="">最珍贵年轻的心</a>
</div>
<!-- 子元素是多行内联文本
水平居中：在父元素设置text-align:center
垂直居中：父元素设置：display:table-cell;vertical-align:middle -->
<div class="box3">
<div class="box2">
<span>天下风云出我辈，一入江湖岁月催</span><br>
<span>皇图霸业谈笑中，不胜人生一场醉</span>
</div>
</div>
<!-- 子元素是块元素
水平居中：子元素设置左右自动：margin：auto
垂直居中：与多行内联文本处理方式一样：display:table-cell;vertical-align:middle -->
<div class="box3">
<div class="box4">
<div class="child"></div>
</div>
</div>
<!-- 子元素是不定宽的块元素
水平居中：子元素转化为行内元素，父元素设置：text-align:center
垂直居中：可以给分页的ul加行高line-height=parent.height
底边居中：更为常用，多行内联文本垂直处理放手一致，vertical-align:bottom -->
<div class="box3">
<div class="box5">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
