轉載自：http://jingyan.baidu.com/article/e2284b2b67b5f1e2e6118d22.html

一般來說，在頁面中需要進行水平居中的元素，大致分為兩種，一種是塊級元素，即display:block，一種是行內元素display:inline-block;

塊級元素包括div，ul，p,以及所有的h類標籤。行內元素又叫內聯元素，a，img，input是最常見的。這些行內元素，可以通過display:block轉換成塊級元素。

弄明白了哪些是塊級元素，哪些是行內元素，我們還要知道其主要區別，兩個行內元素可以在一行顯示，但是第二個塊級元素只能換行顯示。

讓行內元素水平居中顯示，我們需要為其父級元素設定text-align:center,一般這個屬性是用於將文字水平居中的，我們的行內元素就相當於一行之內的文字了，所以可以使用這個方法。

讓塊級元素，水平居中的辦法是為塊元素本身新增margin:0 auto;這樣塊級元素的左右邊距就是自動的，也就可以在是水平方向上居中了。

不管是inline-block還是block，我們需要理解其居中的原理，是inline-block，就對其父級元素新增text-align:center，是塊級元素就對其本身新增margin:0 auto;記住了這些，以後再對元素進行居中，居左，居右的時候就不用擔心自己不會啦。