CSS 中幾種最常用的水平垂直居中的方法

SS 是前端里面的基礎(chǔ)之一，也是非常重要的一部分，它往往決定了你所做出來(lái)的網(wǎng)頁(yè)頁(yè)面是否美觀。在設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面的過(guò)程中，總會(huì)有將元素或者文字進(jìn)行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。

一、使用 margin:auto

當(dāng)元素有給定的高度以及寬度的時(shí)候，使用 margin: auto; 元素僅會(huì)水平居中，并不會(huì)進(jìn)行垂直居中。此時(shí)就需要設(shè)置元素的 position 為 absolute，父級(jí)元素的 position 為 relative，同時(shí)元素的上下左右都需要設(shè)置為 0。

HTML 代碼

<div class="box">
  <div class="center1"></div>
</div>

CSS 代碼

.box{
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
  margin-top: 20px;
}
.center1{
  width: 50px;
  height: 50px;
  background-color: #00ACED;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

效果展示：

二、使用 position:absolute

當(dāng)已經(jīng)知道了要進(jìn)行水平垂直居中的元素的寬高時(shí)，就可以通過(guò)設(shè)置 position: absolute 來(lái)實(shí)現(xiàn)。但是，使用的同時(shí)還需要結(jié)合其他屬性才完整實(shí)現(xiàn)。因?yàn)椋瑔问窃O(shè)置 absolute，上左距離均為一半，就會(huì)出現(xiàn)下面這種情況。很顯然可以看到，元素并不是完全居中，僅只有左上角的位置在中心點(diǎn)

概念圖：

因此想要實(shí)現(xiàn)元素完全水平垂直居中，在設(shè)置了 absolute 定位后，可以設(shè)置 margin 值為負(fù)，或者使用 calc 來(lái)計(jì)算，上左距離在 50% 的基礎(chǔ)上還要減去元素本身一半的寬高。

margin 值為負(fù)或者 calc 計(jì)算均是在已知元素寬高的情況下，假設(shè)不知道元素的寬高，那么怎么實(shí)現(xiàn)水平垂直居中呢？這里就可以使用 transform 屬性，通過(guò)坐標(biāo)位移來(lái)實(shí)現(xiàn)居中。

CSS 代碼

/* 結(jié)合 margin */
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
/* 結(jié)合 calc 計(jì)算*/
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: calc(50% - 25px)
  top: calc(50% - 25px);
}
/* 結(jié)合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

效果展示

PART

三、使用彈性布局

可以通過(guò)彈性布局來(lái)設(shè)置水平垂直居中，這里需要設(shè)置父級(jí)元素 display:flex; 還需要設(shè)置兩個(gè)屬性，水平布局 justify-content 以及垂直布局 align-items。

HTML代碼

<div class="box2">
  <div class="center4"></div>
</div>

CSS代碼：

.box2{
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center4{
  width: 50px;
  height: 50px;
  background-color: #B39873;
}

效果展示：

四、文本水平對(duì)齊和行高

前面介紹的是元素如何實(shí)現(xiàn)水平垂直居中，下面介紹的是如何將文字進(jìn)行水平垂直居中。這第一個(gè)方法也是最經(jīng)常用的，使用文本水平對(duì)齊 text-align 和行高 line-height 來(lái)實(shí)現(xiàn)的。

HTML 代碼

<div class="box3">
  <div class="center5">文字居中</div>
</div>

CSS 代碼

.box3{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.center5{
  text-align: center;
  line-height: 200px;
}

效果展示

PART

五、使用網(wǎng)格布局

第二個(gè)方法可以通過(guò)網(wǎng)格布局 grid 來(lái)實(shí)現(xiàn)。而這里通過(guò) grid 有兩種方式實(shí)現(xiàn)，一種對(duì)元素本身屬性進(jìn)行設(shè)置，另一種在元素的父級(jí)元素中設(shè)置。兩者看上去內(nèi)容似乎差不多，不同的是在元素中設(shè)置的是 align-self 還要多了一個(gè) margin，父級(jí)元素中是 align-items。

相關(guān)代碼：

/* grid 元素中設(shè)置 */
.box4{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
}
.center6{
  align-self: center;
  justify-content: center;
  margin: auto;
}
/* grid 父級(jí)元素中設(shè)置 */
.box5{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
  align-items: center;
  justify-content: center;
}

效果展示：

六、總結(jié)

以上就是關(guān)于 CSS 如何將元素或者文字進(jìn)行水平垂直居中的幾種常用方法，大家還其他關(guān)于 CSS 實(shí)現(xiàn)水平垂直居中的方法嗎？請(qǐng)?jiān)谠u(píng)論區(qū)留下你的想法。

關(guān)注w3cschool編程獅訂閱更多IT資訊、技術(shù)干貨~

.水平居中的 margin：0 auto;

關(guān)于這個(gè)，大家也不陌生做網(wǎng)頁(yè)讓其居中用的比較多, 這個(gè)是用于子元素上的，前提是不受float影響

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            /*text-align: center;*/
        }
        img{
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

2.水平居中 text-align：center；

img的display：inline-block；類似一樣在不受float影響下進(jìn)行實(shí)在父元素上添加效果讓它進(jìn)行水平居中

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            text-align: center;
        }
        img{
            display: inline-block;
            width: 100px;
            height: 100px;
            /*margin: 0 auto;*/
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

3.水平垂直居中（一）定位和需要定位的元素的margin減去寬高的一半
這種方法的局限性在于需要知道需要垂直居中的寬高才能實(shí)現(xiàn)，經(jīng)常使用這種方法

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -50px;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](2.jpg)
    </div>
</body>

4.水平垂直居中（二）定位和margin:auto;
這個(gè)方法也很實(shí)用，不用受到寬高的限制,也很好用

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;

        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](3.jpg)
    </div>
</body>

5.水平垂直居中（三）絕對(duì)定位和transfrom
這個(gè)方法比較高級(jí)了，用到了形變，據(jù)我所知很多大神喜歡使用這個(gè)方法進(jìn)行定位，逼格很高的，學(xué)會(huì)后面試一定要用！這個(gè)是不需要知道居中元素的寬高就可以使用的，代碼里的圖片稍微有點(diǎn)大，改改寬高，僅此而已，在面試中大部分人會(huì)問(wèn)如果不知道寬高該如何居中，答這個(gè)，加分！對(duì)transform不了解的同學(xué)可以查閱一下資料了解一下！

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;

    }
    img{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](4.jpg)
    </div>
</body>

6.水平垂直居中（四）diplay：table-cell

其實(shí)這個(gè)就是把其變成表格樣式，再利用表格的樣式來(lái)進(jìn)行居中，很方便

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        img{
            width: 100px;
            height: 150px;
            /*margin: 0 auto;*/  這個(gè)也行
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](5.jpg)
    </div>
</body>

7.水平垂直居中（五）flexBox居中

這個(gè)用了C3新特性flex,非常方便快捷，在移動(dòng)端使用完美，pc端有兼容性問(wèn)題，以后會(huì)成為主流的

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        img{
            width: 150px;
            height: 100px;
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](6.jpg)
    </div>
</body>

8.水平垂直居中（六）利用vertical-align:middle;
這方法不常見(jiàn)，但是一位朋友補(bǔ)充后我覺(jué)得也不失為一種好方法可以讓別人刮目相看，這個(gè)方法關(guān)鍵要有一個(gè)和容器一樣高的元素作為居中的一個(gè)參照就像b元素一樣

<style>
    .wrap{
            width:300px;
            height:300px; 
            background:rgba(0,0,0,0.5);
            text-align:center;
            font-size:0;
            }
    .vamb{
        display:inline-block; 
        width:0px;
        height:100%;
        vertical-align:middle;
        }
    .test{
        display:inline-block;
        vertical-align:middle;
        font-size:16px;
        text-align:left;
        background:red;
        }
</style>
<body>
    <div class="wrap">
        <b class="vamb"></b>
        <div class="test">
        寬高不定<br>
        垂直水平居中
        </div>
    </div>
</body>

常見(jiàn)又實(shí)用的例子就先寫(xiě)到這，歡迎提意見(jiàn)，謝謝大家！喜歡請(qǐng)關(guān)注點(diǎn)個(gè)贊，也是對(duì)我的支持和鼓勵(lì)！

作者：coderLfy鏈接：https://www.jianshu.com/p/a7552ce07c88

許多方法可以將HTML元素與CSS對(duì)齊，但是一起使用或單獨(dú)使用它們并不是那么容易。開(kāi)發(fā)人員所面臨的困難之一就是試圖將元素集中在頁(yè)面中間。

因此，在本文中，我將展示一些最常用的方法，即通過(guò)使用不同的CSS屬性在水平和垂直方向上居中圖像。

水平居中

讓我們開(kāi)始使用3個(gè)不同的CSS屬性將圖像水平居中。

文字對(duì)齊

使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當(dāng)圖像位于塊級(jí)容器（例如<div>）內(nèi)時(shí)，此方法才有效：

Margin: Auto

使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨(dú)使用margin：Auto將不適用于圖像。如果需要使用margin：auto，則還必須使用2個(gè)其他屬性。

margin-auto屬性對(duì)內(nèi)聯(lián)級(jí)別的元素沒(méi)有任何影響。由于<img>標(biāo)簽是一個(gè)內(nèi)聯(lián)元素，因此我們需要先將其轉(zhuǎn)換為塊級(jí)元素：

其次，我們還需要定義寬度。因此，左右邊緣可以占用其余的空白空間并自動(dòng)對(duì)齊，可以這樣解決問(wèn)題（除非我們給出100％的寬度）：

Display: Flex

將圖像水平居中的第三種方法是使用display：flex。同樣，我們對(duì)容器使用text-align屬性，它也會(huì)使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個(gè)稱為justify-content的附加屬性。

justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最后，圖像的寬度必須小于容器的寬度，否則，它會(huì)占用100％的空間，然后我們就無(wú)法對(duì)其進(jìn)行集中化。

垂直居中放置圖像

1、Display: Flex

對(duì)于垂直對(duì)齊，使用display：flex確實(shí)很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：

現(xiàn)在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：

如果將align-items屬性與display：flex一起使用，就會(huì)將元素垂直放置。

2、位置：絕對(duì)和變換屬性

垂直對(duì)齊的另一種方法是一起使用position和transform屬性。這個(gè)有點(diǎn)復(fù)雜，所以讓我們一步一步地做。

步驟1：定義絕對(duì)位置

首先，我們將圖像的定位行為從靜態(tài)更改為絕對(duì)：

同樣，它應(yīng)該位于相對(duì)放置的容器內(nèi)，因此我們添加一個(gè)位置：相對(duì)于其容器的div。

步驟2：定義頂部和左側(cè)屬性

其次，我們定義圖像的頂部和左側(cè)屬性，并設(shè)置為50％。這會(huì)將圖像的起點(diǎn)（左上角）移到容器的中心：

步驟3：定義變換屬性

在第二步的時(shí)候已經(jīng)將圖像的一部分移出容器。因此，我們需要將其取回內(nèi)部。在圖像上定義轉(zhuǎn)換屬性，并在其X和Y軸上添加負(fù)50％可以達(dá)到目的：

還可以使用其他方法進(jìn)行水平和垂直居中，我這里只嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁(yè)面中心對(duì)齊圖像。

在線咨詢

上一篇：程序員浪漫起來(lái)沒(méi)文科生什么事：HTML制作表白愛(ài)心-無(wú)需編程基礎(chǔ)
下一篇：Web中固定面板怎么做？用CSS3 calc函數(shù)一行就搞定

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

CSS 中幾種最常用的水平垂直居中的方法

一、使用 margin:auto

二、使用 position:absolute

三、使用彈性布局

四、文本水平對(duì)齊和行高

五、使用網(wǎng)格布局

六、總結(jié)

水平居中

文字對(duì)齊

Margin: Auto

Display: Flex

垂直居中放置圖像

您的項(xiàng)目需求