方案一：line-height

適用於單行文字，
居中前：

<div class="vertical">居中元素</div>

.vertical {
            height: 100px;
            line-height:100px;
            border: 1px solid red;
        }

居中後：

說明：這種對於單行的文字很有效果
適合應用在文字和圖片上，並且這種方法，當你文字不是單行時，效果極差，差到讓你感到噁心。

這種方法對運用在小元素上是非常有用的，比如說讓一個button、圖片或者單行文字欄位。

    <div class="vertical">
        <p> 居中元素</p>
        <p>另一個文字呢</p>
    </div>

效果極差

因為line-height是行高，所以每行之間的間距就是100px;

方案二：設定絕對定位，高度(top)和margin-top為高度的一半

    <div class="container">
        <div class="vertical">
            居中元素
        </div
 
>
    </div>

/---css-------/
        .container {
            position: relative;
            border: 1px solid blue;
            height: 200px;
        }

        .vertical {
            height: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
            border: 1
 
px solid red;
        }

實現了中間那個紅框元素的居中

優點：在各大瀏覽器都能適用；
缺點: 基於絕對定位來的，一定要把握住父元素是誰

另外此方法是通過絕對定位來實現的，那麼用這種方法實現元素的垂直居中需要注意以下幾點：其一元素定位關係到一個相對定位參考，所以要保證元素是相對於哪個為參考座標；另外需要設定給元素明確定一個高度值並且給元素設定一個負值的margin-top，而且值為元素高度的一半。

這裡我建議大家給元素定一個寬度值，因為元素進行絕對定位後脫離文件流，其寬度是根據元素內容所佔寬度來計算的（不是100％），為這能讓其視覺效果更好，最好給元素定義一個寬度值。

方案三：利用table-cell實現垂直居中

使用div模擬表格佈局

        .container {
            position: relative;
            border: 1px solid blue;
            height: 200px;
            display: table;
        }

        .vertical {
            display: table-cell;
            vertical-align: middle;
            border: 1px solid red;
        }

html

    <div class="container">
        <div class="vertical">
            居中元素
        </div>
    </div>

優點：此方法沒有高度限制，不會出現滾動條等問題；
缺點：
不相容ie6 ie7；
因為display:table在IE6-7中不被支援

方案四：在居中元素前加一個空的浮動元素

這個浮動元素的高度設定為容器的一半；margin-bottom設定為居中元素高度的一半；

如圖：這裡我用了一個綠色的border來展示這個隱藏元素；可以看到其實就是它把那個位置佔據了，因此居中元素就自動往下平移了；

        .container {
            position: relative;
            border: 1px solid blue;
            height: 400px;
            width: 400px;
            display: table;
        }

        .vertical {
            height: 300px;
            clear: both;
            border: 1px solid red;
        }

        .floater {
            float: left;
            height: 50%;
            margin-bottom: -150px;
            border: 5px solid green;
        }

html

    <div class="container">
        <div class="floater"></div>
        <div class="vertical">
        </div>
    </div>

利用padding

    <div class="columns">
        <div class="item">test</div>
    </div>

        .columns {
            position: relative;
            border: 1px solid blue;
            /* height: 400px; */
            width: 400px;
            display: table;
        }
        .item {
            padding-top: 30px;
            padding-bottom: 30px;
        }

要點：設定上下一樣的padding；
缺點：外容器高度固定不能達到效果
外容器高度不固定：

高度固定（height:400px）:

就不居中了