实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让元居中显示的4种方式</title>
<style type="text/css">
body{
padding: 30px 0;
margin: 0;
background: #e0d3bf;
}
.one,.two,.three,.four{
width: 500px;
height: 200px;
background: skyblue;
margin: 20px auto;
box-shadow: 2px 2px 2px 0 #272727;
}
.one{
text-align: center;
line-height: 200px;
}
.one span{
/*line-height: 200px;*/
}
/*这里有点奇怪的是：元素设置为table-cell 后，margin 对它不起作用*/
.two{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.three{
padding-top: 50px;
height: 150px;
}
.inner{
width: 100px;
height: 100px;
margin: auto;
background: lightgreen;
text-align: center;
line-height: 100px;
}
.four{
text-align: center;
display: table-cell;
vertical-align: bottom;
padding-bottom: 20px;
height: 180px;
}
.box{
/*width: auto;
height: auto;*/
width: 500px;
height: 200px;
margin: auto;
}
</style>
</head>
<body>
<!-- 单行文本 -->
<div class="one">
<span>单行内联文本</span>
</div>
<!-- 多行内联文本 -->
<div class="box">
<div class="two">
<a href="">php</a><br>
<span>多行内联文本</span><br>
<em>this is feels like</em>
</div>
</div>
<!-- 单行块元素 -->
<div class="three">
<div class="inner">
单行块元素
</div>
</div>
<!-- 一行多列 -->
<div class="box">
<div class="four">
<a href="">one</a>
<a href="">two</a>
<a href="">three</a>
<a href="">four</a>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写图片：
