義

居中：盒子在其包含塊中居中，包含塊指的就是盒子的父級

分類

• 水平居中
• 垂直居中

水平居中

• 行盒、行塊盒水平居中

找到行盒 或者行塊盒的父元素，添加css樣式代碼：

{
  text-align: center
}

• 常規流塊盒水平根據中

1. 定寬
2. 設置左右margin為auto

{
  width: 200px;
  margin: 0 auto;
}

• 絕對定位元素的水平居中

1. 定寬
2. 設置左右坐標為0
3. 設置左右margin為auto

{
  width: 200px;
  position: absolute
  left: 0;
  right: 0;
  margin: 0 auto;
}

垂直居中

• 單行文本的垂直居中

設置文本所在元素的行高，為整個區域的高度

{
  height: 200px;
  background: rgb(0, 255, 0);
  line-height: 200px;
}

• 行塊盒或塊盒內多行文本的垂直居中

垂直居中針對行塊盒和塊盒，由于行盒沒有高度，在此略過。

另外此處的文本是直接寫在行塊盒或者塊盒下的，沒有其他元素包裹，這種情況下，是沒有完美解決方法的（如果你有，歡迎交流），不過我們可以借助padding屬性，設置盒子上下內邊距相同，達到類似的居中效果

{
  background: rgb(0, 255, 0);
  display: inline-block;
  padding: 100px 0;
}

• 絕對定位的垂直居中

1. 定高
2. 設置上下坐標為0
3. 設置上下margin為auto

{
  height: 300px;
  background: rgb(0, 255, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

總結

• 常見的行盒

文字元素：span、abbr、em、i、strong、b

圖片和多媒體：img、video、audio

• 部分情況居中時，需要設置盒子高度

好了，本文就寫到這里，如果覺得能幫到你，歡迎關注我，如果覺得有寫的不對的地方，歡迎評論指出來，我會及時改正，相互學習，相互交流才能進步~~~

個視頻來說一下CSS布局里面比較基礎，但是非常重要的一個知識點：居中布局。這里我會給大家介紹幾種實現水平垂直居中的方法。有的方法比較推薦大家使用，有的作為了解就可以了。這里我寫了兩個div，現在要做的就是讓小的紅色這個div在外面大的div里面水平垂直同時居中。接下來我說的這幾種方法里面，前面兩種是我比較推薦大家來使用的。

·第一種，用彈性盒布局，讓它里面的元素在主軸和側軸同時居中就可以了。這個方法是現在大家用的比較多，也比較容易理解的方法。沒問題，現在紅色這個div已經水平垂直都居中了，來恢復一下。

·第二種，這里可以用定位，容器開啟相對定位，然后子元素設置絕對定位，再把top和left都設置成50%?，F在其實是把紅色的div的左上角移到外面大的div的中心點，所以只要把紅色這個div往上面移動高度的一半，還有往左邊移動寬度的一半，這樣就可以實現水平和垂直同時居中了。

這里只要弄清楚這幾個50%是參考誰來進行計算的就可以了。

→首先是top left，這個50%是參考它的包含塊，這里也就是它的父元素的寬高來進行計算的，所以就會把它的左上角定位到父元素的中心點平移的50%，就是參考它自身的寬高來進行計算的。負就是往回走，這樣就剛好可以實現水平和垂直同時居中。OK，沒有問題。

→這兩種方法是我比較推薦大家來使用的，也是比較容易理解的。再來恢復一下。再來說兩種方法，大家作為了解就可以了。這里同樣也是用到定位，再設置四個方向的偏移值都為0，再配合margin為auto，同樣是可以實現水平和垂直都居中了。

為什么不推薦這個方法？因為這里其實是靠外邊距配合定位，把內容區域頂到中間的，盒子其實是被撐大了的，只是肉眼看不出來。

現在這個盒子的模型不一定是我們想要的，當然這個方法某些情況下是可以用的，再把它恢復一下。

·再來說一種比較特殊的方法，也是作為了解就可以了。這里我給它添加一個空的span，然后span我要對它設置高度，讓它撐滿整一個父容器。但是span它是行內元素，對它設置高度是不起效的，所以還要把它轉換成行內塊，不單止它。

紅色的div同樣也要設置成行內塊元素?，F在我們就有了兩個行內塊元素了，是不是就可以設置它們的基線對齊方式，設置成中線對齊。

→這個空的div同樣要設置成中線對齊，所以現在紅色的這個div和span它們就要進行中線對齊。然后span的高度又是撐滿整一個父容器。這樣看起來紅色的div就垂直居中了。但實際上是旁邊這里有一個空的span，它的高度是撐滿整一個父容器的。然后它和紅色的div中線對齊，所以紅色的div看起來就垂直居中了。

那水平局中怎么處理？非常簡單。因為紅色的div現在已經是一個行內塊元素了，我們就可以對它設置text-align，塊級元素用這種對齊方式是不行的。最常見是用于對文字的居中對齊，OK沒有問題，水平和垂直都居中了。

這個視頻給大家分享了4種方法實現水平和垂直同時居中。這里推薦大家主要使用前面兩種方法，后面兩種作為了解就可以了。這個視頻就到這里感謝大家的收看。

平居中方案：

水平居中設置

1、行內元素

設置 text-align:center

2、定寬塊狀元素

設置 左右 margin 值為 auto

3、不定寬塊狀元素

a:在元素外加入 table 標簽（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然后設置 margin 的值為 auto

b:給該元素設置 displa:inine 方法

c:父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:50%

垂直居中設置

1、父元素高度確定的單行文本

設置 height = line-height

2、父元素高度確定的多行文本

a:插入 table （插入方法和水平居中一樣），然后設置 vertical-align:middle

b:先設置 display:table-cell 再設置 vertical-align:middle

在前端面試中，大都會問你div居中的方法：

文筆不好，就隨便寥寥幾句話概括了，希望大家能夠輕拍

不過以后文筆肯定會變得更好一些的。

開始這些東西之前也可以測試一下你對html了解多少，讓我們測試一下吧，小測驗：你對HTML5了解有多少？

今天我們就細數一下幾種方法：

1，使用position:absolute,設置left、top、margin-left、margin-top的屬性

.one{

position:absolute;

width:200px;

height:200px;

top:50%;

left:50%;

margin-top:-100px;

margin-left:-100px;

background:red;

}

這種方法基本瀏覽器都能夠兼容，不足之處就是需要固定寬高。

2，使用position:fixed,同樣設置left、top、margin-left、margin-top的屬性

.two{

position:fixed;

width:180px;

height:180px;

margin-top:-90px;

margin-left:-90px;

background:orange;

}

大家都知道的position:fixed,IE是不支持這個屬性的

3，利用position:fixed屬性，margin:auto這個必須不要忘記了。

.three{

position:fixed;

width:160px;

height:160px;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

background:pink;

}

4，利用position:absolute屬性，設置top/bottom/right/left

.four{

position:absolute;

width:140px;

height:140px;

background:black;

}

5，利用display:table-cell屬性使內容垂直居中

.five{

display:table-cell;

vertical-align:middle;

text-align:center;

width:120px;

height:120px;

background:purple;

}

6，最簡單的一種使行內元素居中的方法，使用line-height屬性

.six{

width:100px;

height:100px;

line-height:100px;

text-align:center;

background:gray;

}

這種方法也很實用，比如使文字垂直居中對齊

7，使用css3的display:-webkit-box屬性，再設置-webkit-box-pack:center/-webkit-box-align:center

.seven{

width:90px;

height:90px;

display:-webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

background:yellow;

color:black;

}

8，使用css3的新屬性transform:translate(x,y)屬性

.eight{

position:absolute;

width:80px;

height:80px;

transform:translate(-50%,-50%);

-webkit-transform:translate(-50%,-50%);

-moz-transform:translate(-50%,-50%);

-ms-transform:translate(-50%,-50%);

background:green;

}

這個方法可以不需要設定固定的寬高，在移動端用的會比較多，在移動端css3兼容的比較好

9、最高大上的一種，使用:before元素

.nine{

position:fixed;

display:block;

background:rgba(0,0,0,.5);

}

.nine:before{

content:'';

display:inline-block;

vertical-align:middle;

height:100%;

}

.nine .content{

width:60px;

height:60px;

line-height:60px;

color:red;

總而言之所有的居中的方法就是你必須要掌握css屬性的這個概念HTML DIV+CSS，你掌握了就可以好好的運用這些居中的東西了

限時!！免費送Dreamweaver、js等前端教程

↓↓↓