CSS基本知識5-CSS對齊

要對齊的關鍵，在於理解塊，行的概念，塊的對齊主要靠自動計算定位，好比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垂直對齊圖文。