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

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

一、使用 margin:auto

當元素有給定的高度以及寬度的時候，使用 margin: auto; 元素僅會水平居中，并不會進行垂直居中。此時就需要設置元素的 position 為 absolute，父級元素的 position 為 relative，同時元素的上下左右都需要設置為 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

當已經知道了要進行水平垂直居中的元素的寬高時，就可以通過設置 position: absolute 來實現。但是，使用的同時還需要結合其他屬性才完整實現。因為，單是設置 absolute，上左距離均為一半，就會出現下面這種情況。很顯然可以看到，元素并不是完全居中，僅只有左上角的位置在中心點

概念圖：

因此想要實現元素完全水平垂直居中，在設置了 absolute 定位后，可以設置 margin 值為負，或者使用 calc 來計算，上左距離在 50% 的基礎上還要減去元素本身一半的寬高。

margin 值為負或者 calc 計算均是在已知元素寬高的情況下，假設不知道元素的寬高，那么怎么實現水平垂直居中呢？這里就可以使用 transform 屬性，通過坐標位移來實現居中。

CSS 代碼

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

效果展示

PART

三、使用彈性布局

可以通過彈性布局來設置水平垂直居中，這里需要設置父級元素 display:flex; 還需要設置兩個屬性，水平布局 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;
}

效果展示：

四、文本水平對齊和行高

前面介紹的是元素如何實現水平垂直居中，下面介紹的是如何將文字進行水平垂直居中。這第一個方法也是最經常用的，使用文本水平對齊 text-align 和行高 line-height 來實現的。

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

五、使用網格布局

第二個方法可以通過網格布局 grid 來實現。而這里通過 grid 有兩種方式實現，一種對元素本身屬性進行設置，另一種在元素的父級元素中設置。兩者看上去內容似乎差不多，不同的是在元素中設置的是 align-self 還要多了一個 margin，父級元素中是 align-items。

相關代碼：

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

效果展示：

六、總結

以上就是關于 CSS 如何將元素或者文字進行水平垂直居中的幾種常用方法，大家還其他關于 CSS 實現水平垂直居中的方法嗎？請在評論區留下你的想法。

關注w3cschool編程獅訂閱更多IT資訊、技術干貨~

lexbox

通常首選方法是使用flexbox居中內容。只需三行代碼即可：display:flex，然后使用 align-items:center 和 justify-content:center 將子元素垂直和水平居中。

如下代碼：

html：

<div class="flexbox-centering">
  <div>Centered content.</div>
</div>

css：

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Grid

使用grid(網格)與flexbox非常相似，也是一種常見的技術，尤其是布局中已經使用網格的情況下。與前一種flexbox技術的唯一區別是它顯示為柵格。

如下代碼：

html:

<div class="grid-centering">
  <div class="child">Centered content.</div>
</div>

css:

.水平居中的 margin：0 auto;

關于這個，大家也不陌生做網頁讓其居中用的比較多, 這個是用于子元素上的，前提是不受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>

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

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

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

<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減去寬高的一半
這種方法的局限性在于需要知道需要垂直居中的寬高才能實現，經常使用這種方法

    <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;
這個方法也很實用，不用受到寬高的限制,也很好用

    <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.水平垂直居中（三）絕對定位和transfrom
這個方法比較高級了，用到了形變，據我所知很多大神喜歡使用這個方法進行定位，逼格很高的，學會后面試一定要用！這個是不需要知道居中元素的寬高就可以使用的，代碼里的圖片稍微有點大，改改寬高，僅此而已，在面試中大部分人會問如果不知道寬高該如何居中，答這個，加分！對transform不了解的同學可以查閱一下資料了解一下！

<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

其實這個就是把其變成表格樣式，再利用表格的樣式來進行居中，很方便

<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;*/  這個也行
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](5.jpg)
    </div>
</body>

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

這個用了C3新特性flex,非常方便快捷，在移動端使用完美，pc端有兼容性問題，以后會成為主流的

<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;
這方法不常見，但是一位朋友補充后我覺得也不失為一種好方法可以讓別人刮目相看，這個方法關鍵要有一個和容器一樣高的元素作為居中的一個參照就像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>

常見又實用的例子就先寫到這，歡迎提意見，謝謝大家！喜歡請關注點個贊，也是對我的支持和鼓勵！

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

在線咨詢

上一篇：寫個網頁更簡單了！讓AI根據手繪原型生成HTML - 教程+代碼
下一篇：適合新手小白學習的html5零基礎教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

一、使用 margin:auto

二、使用 position:absolute

三、使用彈性布局

四、文本水平對齊和行高

五、使用網格布局

六、總結

lexbox

Grid

您的項目需求

一、使用 margin:auto

三、使用彈性布局

四、文本水平對齊和行高