一、行内元素的水平居中
处于块级元素包裹中的行内元素，其水平居中可在其父元素中使用text-align:center，代码如下：
#block-inline {
text-align: center;
}
<div id="block-inline">
<span>我是span标签</span> <br/>
<input type="button" value="按钮"/>
</div>原始图为：
实现局中效果为：
二、块级元素的水平居中
块级元素的水平居中，可以使用margin: 0 auto;实现，代码如下：
.block2_item {
width: 100px;
height: 100px;
background-color: #0077aa;
margin: 0 auto;
}
<div id="block2">
<div class="block2_item"></div>
</div>原始图为:
实现居中效果为：
三、行内元素的垂直居中
对于行内元素的垂直居中，可以设置height值与line-height值相等，代码如下：
.block3 {
width: 200px;
height: 200px;
line-height: 200px;
background-color: #0086b3;
}
<div class="block3">
<div class="block3_item">
<span>我是span标签</span>
</div>
</div>原始图为：
实现居中效果为：
四、块级元素的垂直居中
对于块级元素的垂直居中，可以使用绝对定位，先top: 50%;在margin-top元素高的一半的负值。代码如下：
.block4 {
position: relative;
width: 200px;
height: 200px;
background-color: #0086b3;
}
.block4_item {
width: 50px;
height: 50px;
background-color: yellowgreen;
position: absolute;
top: 50%;
margin-top: -25px;
}
<div class="block4">
<div class="block4_item"></div>
</div>未使用绝对定位前如图所示：
实现居中效果为：
五、块级元素的水平垂直居中
对于块级元素的水平垂直居中，你当然可以使用绝对定位，先top:50%;left:50%;在margin-top;margin-left;高和宽的一半的负值。但是还有一种更简单的绝对定位方法，就是将上下左右值全设为0，再使用margin:auto;就可以使其水平垂直居中。代码如下：
.block5 {
position: relative;
width: 200px;
height: 200px;
background-color: #0077aa;
}
.block5_item {
width: 50px;
height: 50px;
background-color: yellowgreen;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
<div class="block5">
<div class="block5_item"></div>
</div>原始图为：
实现居中效果为：
