要對齊的關鍵，在於理解塊，行的概念，塊的對齊主要靠自動計算定位，比如margin:auto，及浮動,所以最好的辦法是儘量使用行來對齊。

例項：

        .box {
            border: 1px solid #808080;
            height: 200px;
            line-height: 200px;
            width: 200px;
            text-align: center;
        }
        .content {
            color: #ff0000;
            display
 
: inline-block;
            margin: 0 auto;
            width: 80px;
            height: 20px;
        }

我們看看這裡所涉及的知識：

首先，我們外面有個盒子，即Box。

1.這個Box的line-height等於高度，那麼就是內容就只有一行，當然如果是一半，那就是二行了。

2.Box的內容是行業元素，那麼很明顯，如果要顯示兩行，但中間要清除浮動，那就相當於“折行”了。

3.text-align:center;這表示，在這個Box的行內，元素居中顯示，很明顯，水平居中就實現了。只要把Box的內容變成行或行塊，加上這個特性就可以水平居中。

4.值得注意的是,行塊本質還是行，即inline-block，那麼對它使用margin:0 auto是不起作用的。而text-align卻起作用了。可見，inline，inline除了有高寬，但本質還是行內元素。

5.那麼總結一下，水平居中，行內元素就使用text-align，那麼，如果把DiV變成inline，那它裡面的內容，就可以使用text-align水平居中了。假如button居中就可以，然後作為行，要顯示次Botton的高度，就設成line-height.

6.反過來，行內元素，要當作塊處理，那麼設成block模式，然後就可以使用塊的方式了，比如Width，Height，margin 0 auto;

7.對於塊，margin:auto是可以水平居中的，但為什麼垂直無效呢？原因很簡單，就是因為“浮動”，所以我們要使用position大法。

8.對內容塊加入position:absolute,再設定上下左右為0，然後設定:margin:auto;直接全居中。

9.當然還有其它演算法，就是上左50%，Margin上左設成高寬的一半負值。

10.最後就是使用 transform: translate(-50%, -50%); /* 50%為自身尺寸的一半 */

相容性不錯的主流用法是：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 寬度的一半 */
}

Html5方式
.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%為自身尺寸的一半 */
}

簡單方式

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了這個就自動居中了 */
}

變成行方式：兩種：
1.把行高和Box高設成一樣，這就垂直居中了，最簡單，text-align:center，這就水平居中了，或者是inline-block加margin:0 auto;
2.設成inline，然後使用vertical-align:middle;這個有什麼效果呢？就是把文字在行內垂直顯示，比如在圖文排列的時候就起作用了。
總結就是有行高的情況下，設定line-height最簡單，沒有行高的情況下，使用vertical-align垂直對齊圖文。