垂直居中(總結)

時間 2019-11-13

標籤垂直居中總結简体版

原文原文鏈接

在工做中咱們常常會遇到垂直居中的狀況這裏我對本身經常使用的垂直居中進行了總結css

一、line-height html

　　僅限單行文本且高度已知的標籤使用, 全部樣式先清除 * {maigin:0; padding: 0})瀏覽器

　　HTML模版代碼:佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <article class="SingleLine">
        <p>我是單行文本</p>
    </article>
</body>
</html>

　　CSS樣式代碼:post

.SingleLine{
    height: 300px;
    border: 1px solid red;
    line-height: 300px;
}

二、line-height 和 vertical-align: middle 結合實現 flex

　　　這個使用的前提是子元素要轉換爲行內塊元素, 而且在父元素設置line-height 以後子元素要將line-height設置爲默認或者根據實際狀況設置可是不能不設置,若是不設置那麼將會繼承父元素的 line-height 這樣若是子元素中還有子元素那麼樣式會有問題。爲何要設置 vertical-align: middle? 由於瀏覽器默認的元素放置在父元素的基線上。spa

　　HTML模版:(咱們先設置了父元素的line-height)code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .SingleLine{
            height: 100px;
            border: 1px solid red;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <article class="SingleLine">
        <div class="content">
            <p>我是第一行</p>
            <P>我是第二行</P>
        </div>
    </article>
</body>
</html>

　　　　CSS樣式:orm

.content {
    background-color: red;
    width: 300px;
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}`

　　這裏設置width:300px 只是爲了讓你們更好的看到若是不設置 line-height:normal 會致使子元素的內容超出父元素htm

效果以下圖:

　　由上圖能夠看出在子元素中若是還有多行子元素那麼子元素須要設置line-height,若是不設置那麼將會繼承父元素的line-height會致使頁面樣式出現問題。

　　這裏爲何要轉爲 inline-block呢？由於vertical-align只在行內塊元素和行內元素起做用,

　　那麼設置vertical-align的做用是什麼呢？它的做用是設置元素的垂直對齊方式。默認的是元素放置在父元素的基線上，由於要實現居中因此咱們這裏要設置vertical-align: middle，將此元素放置在父元素的中部。

三、經過Position + transform 實現

　　經過position + transform實現垂直居中分爲如下兩種狀況: 一、在不知道父元素高度的時候可使用 position:absolute 二、在知道父元素高度的時候可使用 position:relative

　　咱們詳細介紹一下：
　　一、在不知道父元素高度的時候可使用 position:absolute

　　　　HTML模版:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <article class="article">
        <div class="content">
            <p>我是第一行</p>
            <P>我是第二行</P>
        </div>
        <div>
            <p>我是填充內容的</p>
            <p>我是填充內容的</p>
            <p>我是填充內容的</p>
            <p>我是填充內容的</p>
            <p>我是填充內容的</p>
            <p>我是填充內容的</p>
            <p>我是填充內容的</p>
            <p>我是填充內容的</p>
            <p>我是填充內容的</p>
            <p>我是填充內容的</p>
        </div>
    </article>
</body>
</html>

　　這裏下面添加了一個div 是爲了撐起父元素的高度,由於這裏要模擬父元素不肯定高度。因爲咱們要使用postion: absolute, 因此要向父元素添加position:relative

CSS樣式:

.article{
    position: relative;
    border: 1px solid red;
}
.content {
    background-color: red;
    width: 300px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

　　這裏先使用絕對定位而後設置top值 50% 這會使子元素的上邊界位於父元素的中間因此要讓子元素整個位於父元素的中間則使子元素向上平移本身高度的一半就能夠了

　　二、在知道父元素高度的時候可使用 position:relative

　　　　若是知道父元素的高度,那麼咱們就能夠直接給子元素設置 position:relative屬性: 具體CSS以下:

.article{
    height: 500px;
    border: 1px solid red;
}
.content {
    background-color: red;
    width: 300px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

　　這裏子元素設置相對定位,而後設置top:50%，會致使子元素的上邊界位於父元素的中間因此要讓子元素整個位於父元素的中間則使子元素向上平移本身高度的一半就能夠了

四、display: table 和 vertical-align: middle 結合實現

　　這個的原理相似與第2種這裏table-cell 將元素設置成了行內塊級元素因此可使用 vertical-align: middle使其居中

　　HTML模版:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <article class="article">
        <div class="content">
            <p>我是第一行</p>
            <P>我是第二行</P>
        </div>
    </article>
</body>
</html>

　　CSS樣式:

.article{
    display: table;
    height: 300px;
    border: 1px solid red;
}
.content {
    display: table-cell;
    width: 300px;
    vertical-align: middle;
}

五、flex(彈性佈局)

　　使用彈性佈局須要先將父元素的display設置爲flex, 而後flex提供了 align-items: 屬性這個屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

因此咱們很容易的就能夠實現如下CSS樣式(HTML模版和第4種方案提供的模版同樣,這裏就不重複寫了)

.article{
    display: flex;
　　 align-items: center
    height: 300px;
    border: 1px solid red;
}

　　這裏強調一下使用 align-items會將flex容器的全部子項所有設置爲垂直居中, 假如你只想對一個子項設置垂直居中能夠直接在該子項上添加 align-self: center 屬性

CSS樣式

.article{
    display: flex;
    height: 300px;
    border: 1px solid red;
}
.content {
    align-self: center;
}

六、grid(網格佈局)

　　grid佈局也給咱們提供了 align-items 將所有的子項設置爲垂直居中，因此使用起來也很簡單

.article{
    display: grid;
    border: 1px solid red;
    align-items: center;
}

　　和flex佈局同樣 align-items:center 會將grid容器的全部子項所有設置爲垂直居中，若是你想使個別子項設置垂直居中只須要在須要設置的子項上添加 align-self:center 屬性

.content{
    align-self: center;
}

總結

以上是我對垂直方式的幾種方式的簡單說明,能夠看出使用目前流行的flex、grid佈局實現起來很簡單可是他們的兼容性不是很好,使用的使用必定要考慮兼容性問題。line-height的兩種方式也能夠實現垂直居中可是侷限性很大, table-cell 也能夠實現可是目前table佈局也慢慢的被棄用,因此我的感受使用position和transform 是很好的選擇, 可是若是不考慮兼容性問題那麼使用flex或者grid更爲便捷。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。