多個你不知道的 CSS 居中方案

平居中

內聯元素

要使內聯元素（如鏈接，span 或img）居中，使用 text-align: center 足夠了。

<div class="desk">
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

對于多個內聯元素，也可以使用text-align：center:

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

Flexbox

使用 flexbox 也可以快速居中元素：

.desk {
  	display: flex;
  	justify-content: center;
}

對于多個內聯的項目，也可以正常工作：

CSS Grid

使用網格容器時，圖中的盤子將根據其網格區域居中。請注意，除非將它們包裹在一個元素中，否則這將不適用于多個盤子。

.desk {
  display: grid;
  justify-content: center;
}

塊元素

Auto Margin

寬度和高度已知的塊元素可以通過設置margin-left:auto 和 margin-right:auto 居中元素。

.plate {
  width: 120px;
  height: 120px;
 margin:0 auto;
}

對于多個塊元素，它們應該包裝在一個元素中，然后讓這個父元素居中。

.tray {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Flexbox

對于 flexbox 同樣也是使用 justify-content:center 來居中元素：

.desk {
  display: flex;
  justify-content: center;
}

對于多個元素，我們不需要將它們包裹在一個元素中，flexbox 可以將它們都居中。

CSS定位

通過絕對定位，我們可以輕松地通過CSS transform將其水平居中。

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

在已知元素寬度的情況下，可以使用負邊距代替CSS transform。

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}
復制代碼

垂直居中

一、內聯元素

Vertical Padding

垂直居中元素最簡單的方法之一是使用padding:

  padding-top: 24px;
  padding-bottom: 24px;
}

Vertical Align

vertical-align屬性可用于一個或多個元素。

在此示例中，叉子和刀子應與桌子垂直居中。

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}

Flexbox

為了對齊盤子，叉子和刀，我們可以使用 flexbox:

.desk {
  display: flex;
  justify-content: center;
  align-items: center;
}

塊元素

絕對定位

通過絕對定位元素，可以使用 CSS transform將元素垂直居中：

.plate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

如果知道元素高度，則可以使用負邊距代替transform。

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}

CSS Grid

使用CSS網格，我們可以使用align-items將項目垂直于其網格區域居中。

.desk {
  display: grid;
  align-items: center;
}

水平垂直居中

一、內聯元素

Padding 和Text Align

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

其他元素類型

絕對定位

.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

Flexbox

通過 justify-content:center 和 align-items:center 就可以將元素垂直水平居中：

.plate {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Grid

通過place-items屬性就可以通過，它結合了justify-content和align-items:

.desk {
  display: grid;
  place-items: center;
}

本文轉載自網絡，僅供大家學習！

感謝您的閱讀，如果對您有幫助，歡迎關注"CRMEB"頭條號。碼云上有我們開源的商城項目，知識付費項目，均是基于PHP+vue開發，學習研究歡迎使用，關注我們保持聯系！

是poetry，點擊上方“關注”，每天為你分享前端進階與個人精進干貨。

水平居中方案

方案一：text-align + inline-block

<div id="parent1">
 <div class="child">水平居中</div>
</div>

#parent1{
 text-align: center;
 background:#ddd;
 margin-bottom:20px;
}
#parent1 .child{
 display: inline-block;
 background:#666;
 color:#fff;
}

方案二：margin：0 auto

<div id="parent2">
 <div class="child">水平居中</div>
</div>

#parent2{
 text-align: center;
 background:#ddd;
 margin-bottom:20px;
}
#parent2 .child{
 display: table;
 margin: 0 auto;
 background:#666;
 color:#fff;
}

方案三：absolute+transform

<div id="parent3">
 <div class="child">水平居中</div>
</div>

#parent3{
 position: relative;
 background:#ddd;
 margin-bottom:20px;
}
#parent3 .child{
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 background:#666;
 color:#fff;
}

方案四：justify-content

<div id="parent4">
 <div class="child">水平居中</div>
</div>

#parent4{
 display: flex;
 justify-content: center;
 background:#ddd;
 margin-bottom:20px;
}
#parent4 .child{
 margin:0 auto;
 background:#666;
 color:#fff;
}

垂直居中方案

方案一：利用 line-height 實現垂直居中

這種方法適用于單行文本垂直居中,如果文本內容太長，出現了換行，換行后的內容會溢出

<div id="example1">
    單行文字垂直居中
</div>

#example1 {
    height: 100px;
    line-height: 100px;
    background: #161616;
    color: #fff;
    width: 200px;
}

方案二利用 display: table 實現垂直居中

<div id="example2">
    <div class="inner">塊區域垂直居中</div>
</div>

#example2 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
    display: table;
   margin-bottom:20px;
}
#example2 .inner{
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    background:#999;
}

方案三 margin 填充這種方法需要知道內外容器的大小

<div id="example3">
    <div class="inner">塊區域垂直居中</div>
</div>

#example3 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
   margin-bottom:20px;
}
#example3 .inner{
    margin-left: auto;
    margin-right: auto;
    margin-top: calc((100px - 50px)/2);
    height: 50px;
    background:#999;
}

方案四：經典 absolute 布局上下文垂直居中

<div id="example4">
    <div class="inner">塊區域垂直居中</div>
</div>

#example4 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
  margin-bottom:20px;
}
#example4 .inner{
    height: 50px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -100px;
    background:#999;
}

方案五：absolute+transform

<div id="example5">
    <div class="inner">塊區域垂直居中</div>
</div>

#example5 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
 margin-bottom:20px;
}
#example5 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    background: #999;
    transform: translateX(-50%) translateY(-50%);
}

方案六利用margin：auto 居中

<div id="expample6">
    <div class="inner">Content here</div>
</div>

#expample6 {
    width: 400px;
    height: 100px;
    background: #eee;
    position: relative;
  margin-bottom:20px;
}

#expample6 .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

方案七利用 Flex布局居中

<div id="expample7">
    <div class="inner">Content here</div>
</div>

#expample7 {
    width: 400px;
    height: 100px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

#expample7 .inner {
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

作者介紹：poetry，專注前端進階寫作與個人精進干貨，目前在上市公司負責小程序等相關的研發。

言

css水平垂直居中一直是一個亙古不變的話題，它常常出現在優美的網頁上以及各大前端面試當中。說來慚愧，在兩年前面試的時候，我完全不知道如何做到水平和垂直均居中的方法，那場面別提有多尷尬了（特想找個地洞鉆進去）。現在都2022年了，這些技巧現在已經不是技巧了吧，只是好記性不如爛筆頭，還是乖乖記下來吧，得把它玩透才行！

注：文中例子沒寫明html代碼時，使用的是下面結構：

<div class="example example14">
    <div class="con">
        超級好用超級放心    
        <a href="https://tinypng.com/" target="_blank">在線壓縮圖片</a>
        <span>壓縮完可以 </span> 
    </div>
</div>

只是類名會有所不同。

1、line-height

適用：單行文字（垂直居中）
原理：將單行文字的行高設定后，文字會位于行高的垂直中間位置。

// html
<div class="example">Lorem ipsam.</div>
// css
.example{
    width: 400px;
    background: #afddf3;
    line-height: 50px;
}

效果：

2、line-height + inline-block

原理：將多個元素或多行元素當成一個行元素來看待，所以我們必須要將這些數據多包一層，并將其設定為 inline-block。由于inline-block在不同瀏覽器會有空隙產生，因此設定父元素font-size：0來消除，從而達到完美的垂直居中。

.example2{
    width: 400px;
    border: 1px solid #dcdcdc;
    line-height: 100px;
    font-size: 0;
}
.example2 .con {
    display: inline-block;
    line-height: 2;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

3、:before + inline-block

原理：:before 偽類元素搭配 inline-block 屬性的寫法應該是很傳統的垂直居中的技巧了，此方式的好處在于子元素居中可以不需要特別設定高度，我們將利用:before偽類元素設定為100%高的inline-block，再搭配上將需要居中的子元素同樣設置成inline-block性質后，就能使用vertical-align: middle來達到垂直居中的目的了，此方式在以往其實是個非常棒的垂直居中解決方案，唯獨需要特別處理掉inline-block元素之間的4-5px空間這個小缺陷，不用怕，設置父元素font-size: 0，子元素font-size: 15px即可。

// css
.example3 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example3::before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.example .con {
    width: 300px;
    font-size: 15px;
    background: #afddf3;
    display: inline-block;
    vertical-align: middle;
}

效果：

4、table + margin

適用情景：單對象（水平居中）
原理：將子元素設置塊級表格，再設置水平居中。

.example4 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table;
    margin: 0 auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

5、table + table-cell + vertical-align: middle

適用情景：多對象（垂直居中）

// html
<div class="example example5">
    <div class="con">
        超級好用超級放心    
        <a href="https://tinypng.com/" target="_blank">在線壓縮圖片</a>
        <span>壓縮完可以打包下載哦 </span> 
    </div>
    <div class="con">
        CSS-TRICKS
    </div>
</div>

// css
.example5 {
    display: table;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

6、absolute + margin 負值（推薦）

原理：設置絕對定位，top: 50%;后，再設置高度一半的負值實現。說來說去，這就是一道簡單的數學題而已。
缺陷：需要設置居中元素的高度。

.example6 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example6 .con {
    position: absolute;
    top: 50%;
    height: 80px;
    margin-top: -40px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

7、absolute + margin auto（推薦）

原理：當元素設置為絕對定位后，它就抓不到整體可運用的空間范圍，所以margin: auto會失效，但當你設置了top:0;bottom:0;時，絕對定位元素就抓到了可運用的空間了，這時你的margin:auto就生效了。
缺陷：定位元素必須有固定的寬高（百分比也算）。 tips:上下左右四個方向要設置成一樣的值。

.example7 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example7 .con {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

8、absolute + translate（推薦）

原理：利用絕對定位時的top 與right設置元素的上方跟左方各為50%，再利用 transform: translate(-50%, -50%);位移居中元素自身寬與高的50%就能達成居中的目的了。
顯著優勢：無需固定定位元素的寬高。

.example8 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example8 .con {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    background: #afddf3;
}

效果：

9、Flex + align-items（推薦）

適用情景：多行文字（垂直居中）
原理：彈性布局，align-items定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式，參考CSS-TRICKS

.example9 {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example9 .con {
    font-size: 15px;
    background: #afddf3;
}

效果：

10、Flex + justify-content（推薦）

適用情景：多行文字（水平居中）
原理：彈性布局，justify-content設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，參考CSS-TRICKS

.example10 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    height: 80px;
    font-size: 15px;
    background: #afddf3;
}

效果：

11、Flex + :before + flex-grow

適用情景：多行文字（垂直居中）
原理：彈性布局，Flex-direction：column;將項目垂直顯示，正如一個列一樣。flex-grow: [number];規定項目將相對于其他靈活的項目進行擴展的量，參考CSS-TRICKS

.example11 {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example11:before {
    content: '';
    flex-grow: .5;
}
.example11 .con {
    font-size: 15px;
    background: #afddf3;
}

效果：

12、Flex + margin（推薦）

.example12 {
    display: flex;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example12 .con {
    margin: auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果:

13、Flex + align-self

原理：align-self定義flex子項單獨在側軸（縱軸）方向上的對齊方式。

.example13 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example13 .con {
    align-self: center;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

14、Flex + align-content

原理：align-content在彈性容器內的各項沒有占用交叉軸上所有可用的空間時對齊容器內的各項（垂直），彈性項目有多項此屬性才會發揮作用。

.example14 {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example14:before, .example14:after {
    content: "";
    display: block;
    width: 100%;
}
.example14 .con {
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

以上就是我總結的css垂直或者水平居中技巧了。下面是一個比較常見的例子,往往是不想讓圖片發生變形并且不管尺寸大小均會顯示在容器的正中央（以下例子應用的是第8條）。

<div class="imgbox-box">
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
</div>

.imgbox-box {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.imgbox {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ebf8ed;
    overflow: hidden;
}
.imgbox img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

效果：

結語

上面例子中，有些是水平居中，有些是垂直居中，將它們某兩個合在一起就能實現水平和垂直均居中。不過我相信肯定不止這些方法，還有其他的值得我們去探究。若文中有錯，請大家指正，謝謝！

在線咨詢

上一篇：寫個網頁更簡單了！讓AI根據手繪原型生成HTML - 教程+代碼
下一篇：APP精選-制作高逼格微信頁面-易企秀！

您的項目需求

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

整合營銷服務商

多個你不知道的 CSS 居中方案

平居中

塊元素

CSS定位

垂直居中

塊元素

CSS Grid

水平垂直居中

其他元素類型

Flexbox

CSS Grid

水平居中方案

方案一：text-align + inline-block

方案二：margin：0 auto

方案三：absolute+transform

方案四：justify-content

垂直居中方案

方案一： 利用 line-height 實現垂直居中

方案二 利用 display: table 實現垂直居中

方案三 margin 填充 這種方法需要知道內外容器的大小

方案四：經典 absolute 布局上下文垂直居中

方案五：absolute+transform

方案六 利用margin：auto 居中

方案七 利用 Flex布局 居中

言

1、line-height

2、line-height + inline-block

3、:before + inline-block

4、table + margin

5、table + table-cell + vertical-align: middle

6、absolute + margin 負值（推薦）

7、absolute + margin auto（推薦）

8、absolute + translate（推薦）

9、Flex + align-items（推薦）

10、Flex + justify-content（推薦）

11、Flex + :before + flex-grow

12、Flex + margin（推薦）

13、Flex + align-self

14、Flex + align-content

結語

您的項目需求

方案一：利用 line-height 實現垂直居中

方案二利用 display: table 實現垂直居中

方案三 margin 填充這種方法需要知道內外容器的大小

方案六利用margin：auto 居中

方案七利用 Flex布局居中