前言
看了好多篇帖子，发现没有一个能够直接让新手很快上手使用的居中布局。所以在此进行一番总结，也算是我对居中布局的一点点积累沉淀，同时也方便初学者们拿来即用。
一、元素分类
1.行内元素
行内元素，也就是内联元素，可以在一行内显示多个。注：元素的高度、宽度、顶部底部边距均不可设置，元素的高度和宽度就是它包含的文字或图片的高度和宽度。
行内元素有这些：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
当然有些时候可以通过以下代码变成块级元素：
display: block;
2.块级元素
块级元素，霸占一行，别的元素要另起行才可以。注：元素的高度、宽度、顶部底部边距可设置，元素宽度在不设置的情况下，是它本身父容器的100%。
块级元素有这些：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
同样的你也可以通过以下代码把块级元素变为行内元素：
display: inline;
3.内联块状元素简介
内联块状元素，和行内元素相似，都在可以显示在一行上。注：元素的高度、宽度、行高以及顶和底边距都可设置。
内联块状元素有这些：<img>、<input>
display: inline-block;
二、居中方法
a.使用左右外边距自适应方法：margin: 0 auto; /*使用此方法需要变为内联块状元素*，且需要固定宽度*/
b.同样使用左右外边距方法：
width: 500px;
height: 30px;
position:relative;
margin-left: 50%;
left: -250px; /*250px是元素的宽度除以2得到，且需要进行定位*/
c.父元素设置text-align: center; /*使用此方法需要变为行内元素*/
d.对于宽度不确定的元素，可以在外层套上一个table标签，然后给table使用margin: 0 auto;来居中：
table{
margin: 0 auto;
}
HTML代码：
<table>
<tbody>
<tr>
<td>
<div class="center">
我想水平居中！
</div>
</td>
</tr>
</tbody>
</table>
e.对于宽度不确定的元素，给它和父元素进行定位，分别设置left: -50%和left: 50%，然后实现水平居中：
.father{
position:relative;
left:50%;
width: 960px;
height: 300px;
background: yellow;
}
.children{
height: 30px;
background:#ccc;
position:relative;
left:-50%;
}
HTML代码：
<div class="father">
<div class="children">aaaaaaaa</div>
</div>