css元素水平居中和垂直居中的方式

時間 2019-11-21

標籤 css 元素水平居中垂直方式欄目 CSS 简体版

原文原文鏈接

關於居中的問題，一直處於迷惑不解的狀態，知道的幾種方法好像也不是每一次都會起到做用，因此更加迷惑。主要是不清楚該
在什麼狀況下采用哪一種解決方法，因此，整理了一些方法，梳理一下思路，作一個總結。css

1. line-height使單行文本垂直居中

對於單行文本，能夠設置它的行高等於它父容器的高度，這樣就實現了該文本的垂直居中，可是此方法只適用於單行文本。html

（其實嚴格意義上來講，文字並非絕對的垂直居中的，有那麼很小的幾像素差距，只是咱們看上去它是居中的；這裏的緣由，就是文本的基線對齊的因素了，感興趣的朋友能夠再深刻地去了解一下，這裏我就不展開了）平時這樣用就能夠了。css3

對於多行文本，設置line-height就沒法實現了，在這裏有一個方法比較好。網絡

還記得剛學習html的時候，你們應該都記得表格table吧，在每個單元格里，若是咱們想要讓裏邊的文本垂直居中的話，用到的屬性是 vertical-align：middle；因此在多行文本的狀況下，就能夠用的這個屬性。wordpress

前提條件是，咱們須要給文本再加一層標籤，這裏在 box3 中，我用 span 標籤把文字包了起來。佈局

給 span 的父級元素 div.box3 設置 display:table；給 span 設置display:table-cell;vertical-align:middle; 就能夠了。學習

這裏我沒有考慮IE低版本兼容性問題，能夠參考下方的推薦閱讀，作進一步瞭解。spa

示例代碼以下：3d

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{margin:0;padding:0;}
            div{
                margin: 50px auto;
                width: 600px;
                height: 100px;
                line-height: 100px;
                font-size: 20px;
                font-weight: bold;
                color: #ff1493;
                background-color: #fff;
                box-shadow: 0 0 5px #000;
                border-radius: 10px;
            }
            .box2{
                color: #800000;
            }
            .box3{
                display: table;
                margin-top: 200px;
            }
            .box3 span{
                display: table-cell;
                vertical-align: middle;
                line-height: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            這段文字想要居中！這段文字想要居中！這段文字想要居中！
        </div>
        <div class="box2">
                咱們也想要居中！<br>
                咱們也想要居中！<br>
                咱們也想要居中！
        </div>
        <div class="box3">
            <span>
                咱們也想要居中！<br>
                咱們也想要居中！<br>
                咱們也想要居中！
            </span>
        </div>
    </body>
    </html>

效果以下：code

2. text-align 水平居中

該屬性只能對圖片、文字等行內元素(display爲inline 或 inline-block 等)進行水平居中。

3. margin設置auto

水平方向上：

不管是塊狀元素仍是行內元素，均可以經過設置 margin 的 left 和 right 爲 auto，來達到水平居中的效果，此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。經常使用的地方，在作居中佈局的時候，對於一個div設置 margin：0 auto; 來實現水平居中。

水平垂直方向：

對於一個塊級元素，對它作絕對定位，而後設置它的 left right top bottom 都是0， margin 是 auto，來實現水平垂直都居中，對於行內元素，沒法設置，由於margin-top 和 margin-bottom 對於行內元素不起做用；

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        .parent{
            position: absolute;     /* 父級元素設置相對定位 */
            margin-left: 100px;
            margin-top: 100px;
            width: 600px;
            height: 400px; 
            border: 1px solid #ddd;
            border-radius: 15px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(0,0,0,.5);
        }
        .child{
            position: absolute;     /* 子級元素設置絕對定位 */
            width: 100px;
            height: 100px;
            background-color: #3eb777;
            border-radius: 15px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin:auto;    /* 這個屬性設置是必須的 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

效果以下：

那麼，它是如何自適應的呢？

緣由要考慮到絕對定位，由於絕對定位的佈局取決於三個因素，一個是元素的位置，一個是元素的尺寸，一個是元素的 margin 值。

沒有設置尺寸和 margin 的元素會自適應剩餘空間，位置固定則分配尺寸，尺寸固定便會分配 margin，都是自適應的。這樣就實現了絕對居中的效果。

IE7如下的渲染方式不一樣，渲染規則也不同，它不會讓定位元素去自適應。so~

4. vertical-align 設置圖片垂直居中(行內元素)

咱們先來看一下代碼，代碼中多設置了一個空的 span 標籤，爲何要這樣，首先要搞清楚 vertical-align 這個屬性的特色，它是相對兄弟級(line-height)來定位的（這裏又涉及到了line-height和vertical-align的關係了，它們兩個也是基情滿滿的，若有須要，你們能夠移步到張鑫旭大神博客裏進行查閱），而且它僅對行內元素有效，因此，在要定位的元素後面多加一個行內元素 span 來撐開父級的行高，以此來居中。

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        .parent{
            margin-left: 100px;
            margin-top: 100px;
            width: 600px;
            height: 400px; 
            border: 1px solid #ddd;
            border-radius: 15px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(0,0,0,.5);
            text-align: center;
        }
        .child{
            width: 0;
            line-height: 400px;
        }
        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="parent">
        <img src="a21.png" alt="">
        <span class="child"></span>
    </div>
</body>
</html>

效果以下：

5. 使用絕對定位來實現居中

該方法只適用於那些已知寬度和高度的元素，而且絕對定位對頁面佈局沒有影響的狀況下。

第一步，絕對定位進行居中的原理是經過把這個絕對定位元素的 left 或 top 的屬性設置爲 50%，這個時候並非居中的，而是比居中的位置偏移了這個元素寬度或高度的一半距離；

第二步，已知寬高的元素，可使用一個負的 margin-left 或 margin-top 的值來把它拉回到居中的位置，這個負的 margin 值就是這個元素寬度或高度的一半。

未知寬高的元素，中可使用 transform:translate(); 這個屬性進行設置，這個位移屬性是相對於自身進行的，能夠傳入兩個參數，分別是 x 和 y 方向上的偏移量，因此能夠傳入 (-50%,-50%) 使得元素移動到中心位置實現水平垂直居中。

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        .parent{
            position: relative;
            margin-left: 100px;
            margin-top: 100px;
            width: 600px;
            height: 400px; 
            border: 1px solid #ddd;
            border-radius: 15px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(0,0,0,.5);
            text-align: center;
        }
        .child{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: #3eb777;
            border-radius: 15px;
            margin-top: -50px;
            margin-left: -50%;
            /*transform: translate(-50%,-50%); */    /*css3中的新屬性*/
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

第一步效果：

第二步效果：