垂直居中相關知識總結

時間 2019-11-10

標籤垂直居中相關知識總結简体版

原文原文鏈接

垂直居中相關知識總結

前言

工做中用到了不少關於垂直居中相關的知識以前，在SF上提問了個問題CSS關於垂直居中，你們有沒有什麼比較好的建議。很是感謝各位前輩對個人幫助，前輩們給的答案都很是多也各式各樣，我以爲有必要把你們的回答總結一下。javascript

方法總結

1、絕對定位之automargin

先來看一下絕對定位的概念：

position : absolute;css

將被賦予此定位方法的對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父級對象進行絕對定位，若是對象的父級沒有設置定位屬性，即仍是遵循HTML定位規則的，則依據 body 對象左上角做爲參考進行定位。絕對定位對象可層疊，層疊順序可經過 z-index 屬性控制，z-index值爲無單位的整數，大的在最上面，能夠有負值。html

說明：

使用絕對定位要求元素必須設置明確高度。內容超過元素高度時須要設置overflow決定滾動條的出現java

樣式：

HTML結構segmentfault

<div class="container">
     <div class="absolute-center">
         我是絕對定位<br/>
          我在垂直居中
         <br/> 歐耶
         <br/>
     </div>
 </div>

CSS樣式瀏覽器

.absolute-center {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #f0f0f0;
    /*IE不支持resize*/
    resize: both;
    overflow: auto;
}

頁面呈現樣式wordpress

優缺點分析

優勢：支持響應式，只有這種方法在resize後仍然居中；佈局
缺點：沒有顯式設置overflow時，內容超過元素高度時會溢出，沒有滾動條；flex

2、絕對定位之負margin

說明：

已知元素高度後，使用絕對定位將top設置爲50%，mergin-top設置爲內容高度的一半(height + padding) / 2；內容超過元素高度時須要設置overflow決定滾動條的出現；top：50%元素上邊界位於包含框中點，設置負外邊界使得元素垂直中心與包含框中心重合；spa

樣式：

CSS樣式

.absolute-center {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -50px;
    background: #f0f0f0;
}

頁面呈現樣式

優缺點分析

優勢：代碼量少、適用於全部瀏覽器、不須要嵌套標籤；
缺點：不支持響應式(不能使用百分比、min/max-width)；

3、額外div

說明：

在須要居中的元素外插入一個div，設置外div的height爲50%，margin-bottom爲內部元素的一半（height+padding）/2。內容超過元素高度時須要設置overflow決定滾動條的出現。

樣式：

HTML結構

<div class="container">
    <div class="outer"></div>
    <div class="inner">
        我是絕對定位
        <br/> 我在垂直居中
        <br/> 歐耶
        <br/>
    </div>
</div>

CSS樣式

.outer {
    height: 50%;
    margin-bottom: -50px;
}
.inner {
    margin: auto;
    height: 100px;
    width: 100px;
    background-color: #f0f0f0;
}

頁面呈現樣式

優缺點分析

優勢：瀏覽器兼容性好，支持舊版本ie；
缺點：須要額外元素、不支持響應式；

4、table佈局

說明：

關於display:table-cell應用，張鑫旭前輩寫過一篇博文我所知道的幾種display:table-cell的應用；我就不詳細講述。

display:table此元素會做爲塊級表格來顯示相似

table標籤

，表格先後帶有換行符。

display:table-cell 此元素會做爲一個表格單元格顯示相似

td 和 th標籤

原理：

利用表佈局特色，vertical-align設置爲Middle後，單元格中內容中間與所在行中間對齊。

樣式：

1.HTML

<div class="container">
     <div class="absolute-center">
         我是絕對定位<br/>
          我在垂直居中
         <br/> 歐耶
         <br/>
     </div>
 </div>

2.CSS樣式

.container{
    display: table;
    height: 200px;
    width: 100px;
    background: #f0f0f0;
}
.absolute-center{
    /*將cell垂直居中，若是外層div不爲table則tablecell必須有高度*/
    display: table-cell;
    vertical-align: middle;
}

3.頁面呈現

優缺點分析

優勢：支持任意內容的可變高度、支持響應式；
缺點：每個須要垂直居中的元素都會須要加上額外標籤（須要table、table-cell兩個額外元素）；

5、line-height方式

說明：

該方式只適用於狀況比較簡單的單行文本，只須要簡單地把 line-height 設置爲那個對象的 height 值就可使文本居中了。這種方法在小元素上很是有用，例如使按鈕文本或者單行文本居中。

原理：

若是line-height高度大於font-size，生於高度瀏覽器會平分到文字上下兩端。

樣式：

1.HTML

<div class="container">
        我是line-height
    </div>

2.CSS樣式

.container {
            width: 200px;
            height: 100px;
            line-height: 100px;
            background-color:#f0f0f0;
        }

3.頁面呈現

優缺點分析

優勢：適用於全部瀏覽器無足夠空間時不會被截斷；
缺點：只對文本有效(塊級元素無效) 多行時，斷詞比較糟糕；

6、inline-block方式

說明：

將center元素display設置爲inline-block，vertical-align設置爲middle，爲包含框設置after僞元素，將僞元素display設置爲inline-block,vercial-align設置爲middle，同時設置height爲100%，撐開容器。

原理：

爲同一行的inline-block元素設置vertical-align：middle，該行內的inline-block元素會按照元素的垂直中心線對齊。

樣式：

1.HTML

<div class="outer">
        <div class="inner">
            我是inline-block
            <br/> 我在垂直居中
            <br/> 歐耶
            <br/>
        </div>
    </div>

2.CSS樣式

.outer {
            display: block;
        }       
        .outer:after {
            content: '';
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }    
        .inner {
            background-color: #f0f0f0;
            display: inline-block;
            vertical-align: middle;
        }

3.頁面呈現

優缺點分析

優勢：支持響應式、支持可變高度；
缺點：會加上額外標記；

7、JS編寫居中

說明：

與CSS方法的絕對定位類似，不過具體的定位方式是在js中寫出，便於維護。

樣式：

HTML結構

<div id="box-out">
        <div id="box">
            我是js居中
            <br/> 我在垂直居中
            <br/> 歐耶
            <br/>
        </div>
    </div>

CSS樣式

#box-out {
            width: 200px;
            height: 200px;
        }
        #box {
            position: absolute;
            background-color: #f0f0f0;
            width: 100px;
            height: 100px;
        }

3.javascript

<script type="text/javascript">
        function boxGao() {
            var box = document.getElementById('box');
            var outBox = document.getElementById('box-out');
            var gao = box.offsetHeight;
            var outGao = outBox.offsetHeight;
            box.style.top = (outGao - gao) / 2 + 'px';
        }
        boxGao();
    </script>

4.頁面呈現