標籤：

用 CSS 實現元素垂直居中，有哪些好的方案？

01-14

Google 上一大把, 但是很多感覺過時了, 不知如何鑒別

1.不知道自己高度和父容器高度的情況下, 利用絕對定位只需要以下三行：

parentElement{
position:relative;
}

childElement{
position: absolute;
top: 50%;
transform: translateY(-50%);

}

2.若父容器下只有一個元素，且父元素設置了高度，則只需要使用相對定位即可

parentElement{
height:xxx;
}

.childElement {
position: relative;
top: 50%;
transform: translateY(-50%);
}

demo: Edit fiddle - JSFiddle

Flex 布局：

不考慮兼容老式瀏覽器的話，用Flex布局簡單直觀一勞永逸：

parentElement{
display:flex;/*Flex布局*/
display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
}

demo: http://codepen.io/anon/pen/PZKZqe

水平居中方案：

水平居中設置

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;

top:50%;

left:50%;

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;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

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;

top:50%;

left:50%;

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;

top:0;

right:0;

bottom:0;

left:0;

text-align:center;

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

}

.nine:before{

content:"";

display:inline-block;

vertical-align:middle;

height:100%;

}

.nine .content{

display:inline-block;

vertical-align:middle;

width:60px;

height:60px;

line-height:60px;

color:red;

background:yellow;

}

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

文章來源：

http://weixin.qq.com/r/azrB2YbE6NuXrcK69295 (二維碼自動識別)

垂直居中的方法數不勝數，隨便舉兩個：

1. 表格居中

HTML：

&&&&

CSS：

#box { display: table; height: 400px; background: #c00; }

#content { color: #fff; text-align: center; display: table-cell; vertical-align: middle; }

兼容性：http://caniuse.com/#search=table，除了IE6/7都支持

2. inline-block

HTML:

&

&我是內容&
我也是內容&

&我是演員&

&

CSS:

#box { height: 400px; background: #c00;}

#content, #actor { display: inline-block; vertical-align: middle;}

#content { font-size: 12px; color: #fff;}

#actor {height: 400px; font-size: 0;}

加粗體的部分是關鍵所在。原理是都顯示為行框的高度由最高的行內框決定。div#actor作為演員，高度指定和父元素一致。

兼容性：支持inline-block的瀏覽器均可。對於IE6/7，可以先使用hack方式使其支持Inline-block後，使用此方法實現垂直居中。

來源：張鑫旭的博客

3. 其他的方法還有3個div嵌套使用相對定位等，兼容性也較好，但是比較麻煩，請自行查找吧~

&&&

.foo{display:table-cell;vertical-align:middle;*display:block;*font-size:(heightX0.873);*font-family:arial}

.foo img{vertical-align:middle}

來自淘寶UED： http://hi.baidu.com/jw_man/item/fbdd8f94a776d1b9cd80e5db

前端時間有寫到類似的筆記，貼在這裡把，題主問的是垂直居中，而目前答案是將水平居中的居多，這裡就集中討論垂直居中吧。

第一種：inline 元素

  • inline 元素的等內邊距，上下兩邊的內邊距相等，則中間內容居中，demo 傳送門：http://codepen.io/StevenYuysy/pen/grqPvj

  • inline 元素的行高，行高與容器高度相等，則中間內容居中，demo 傳送門：http://codepen.io/StevenYuysy/pen/vGbLrR

  • 如果上面的代碼都不生效的話，有可能行內元素是在表格裡面，這個時候可以利用inline元素的 CSS 屬性 vertical-align ，默認是 baseline 屬性，將其設置為 middle，這個屬性常用於 inline-level 和 table-cell 的元素。 demo傳送門：inline_vertical_demo_3

第二種：block 元素

  • block 元素利用絕對定位以及負外邊距，適用於知道元素的寬度和高度，兼容性好，所以會看到很多遠古時代的居中都採用這種辦法，參照下圖，注意這裡的外邊距減去的是 block 元素寬度的一半，即

    margin:-（width/2） px

  • block 元素利用絕對定位以及 transform ，適用於不知道元素的寬度盒高度，參照下圖

  • block 元素在外部的容器，利用 flex 的屬性將其設置為下圖，則子元素 block 元素垂直居中

    • 水平垂直居中

    • 在垂直居中的基礎上，block 元素的三種方法均能演變為水平垂直居中，前兩種只需增加 left 屬性以及 margin-left 或者 transformX 當中的一個屬性達到目的
    • 利用 flex 的話，添加多一個 align-items:center 即可
    • 利用上面三種方法實現的水平居中 demo 傳送門：
    • IFE task1_4_1

    • IFE task1_4_2

    • IFE task1_4_3

    參考文章

    • Centering in CSS: A Complete Guide

方法很多，我主要用兩種，各有個的缺點，但用在特定的環境，還是不錯的，所有瀏覽器全部兼容

1.

&&&

.b{

width:200px;height:200px;text-align:center;vertical-align:middle;line-height:200px;

}

img{

width:50px;height:50px;vertical-align:middle;

}

2.

&&&

.b{

width:200px;height:200px;

display:table-cell;vertical-align:middle;text-align:center;

*display:block;/*ie6.7bug*/

*font-size:175px;/*200*0.873*/

*font-family:Arial;

}

img{

width:50px;height:50px;vertical-align:middle;

}

補充一個文字垂直居中的辦法：就是元素的行高和父級元素高度一樣，全兼容

&

&

&

div{height:40px;background-color:#ccc;}

b{line-height:40px;}

&

&

&

&

&他們都是高手&

&

&

&

廢話不說，很多方法，這裡這個課程恐怕是最完整的ＣＳＳ攻略講解了：網頁元素CSS居中實現完整攻略 極客標籤

http://www.linxz.de/css_tool/middle_01.html

直接用可視化工具吧親

用flex布局：

.flex-container{

width: 500px;

display: flex;

display: -webkit-flex;

flex-flow: row wrap;

justify-center: center;

align-items: center;

background: silver;

}

.flex-item{

width: 100px;

height: 100px;

background: pink;

}

flex-item是flex-container的子元素,引用大神的話這是真正意義上的居中

或者

.flex-container{

width: 500px;

display: flex;

display: -webkit-flex;

flex-flow: row wrap;

background: silver;

}

.flex-item{

width: 100px;

height: 100px;

margin: auto;

background: pink;

}

詳情參見https://bocoup.com/weblog/dive-into-flexbox

看一下這個：http://sofish.de/1909

個人筆記一篇 levinit/itnotes-css居中

如有錯誤敬請指正

說明

  • .center表示要被居中的元素，.wrap 表示要居中的元素的父元素（包含.center元素的元素）。

為了便於理解和敘述同一：

    • 對於文本內容居中的情況，.wrap就是指包含文字的元素（例如&文字& ，i標籤就是.wrap ）。

文本內容會在外部創建一個行框（line-box），可以將文本看作是一個（外框隱形）的行內元素 。

    • 將文本內容包含在一個容器中（『父親』），然後再將該容器在另一個容器（『祖父』）內居中不看作是文本內容居中，而是該文本內容外部容器的居中（『父親』在』祖父『內居中）。
  • 須知某些情況不設置元素寬高、邊框色/背景，無法看出居中效果，也就無所謂居中與否。

例如父容器不設置背景或邊框，無法看出子元素是否居中，示例代碼只是寫出了該居中方法所需要的那部分樣式 。

  • inline元素，準確來說，是不可替換（non-replace）的inline元素，不能設置豎直方向上的margin和padding，下不贅述。（margin同理）

參看margin規定和padding規定 ，之所以不能設置margin/padding，是因為

padding的值是根據目標元素的width計算出來的，而inline中的non-replace元素的width是不確定的。

  • CSS兼容性情況未作說明，具體自行查閱caniuse。
  • 推薦使用那些不必使用到精確數值（如50px，20rem這種情況，百分比值50%除外）的方法。

行內內容的居中

如何讓一個容器的行內內容（文本和行內元素--inline/inlineblock）居中。（當然inline-block比較特殊，即有行內屬性，又有塊級屬性）

text-align:center水平居中

在塊級元素上設置text-align:center，其內部的inline或inline-block的子元素以及文本內容會在父元素內居中。

line-height垂直居中

line-height設置了行間的距離（行高），將要居中的元素的line-heigth值設置為和其塊級父元素的height值一樣時，其內部內容會垂直居中。

用於單行的行內元素的垂直居中

.wrap{
height:100px;
line-height: 100px;
}

注意：

  • line-height不能使用負值
  • 在塊級元素使用line-height是定義該元素基線之間的最小距離而不是最大距離。

vertical-align:middle垂直居中

vertical-align的使用效果要分為以下不同情況：

  • 行內元素inline/linline-block/inline-table內部內容的居中

使用偽元素（也可以.wrap的父元素和兄弟元素進行居中，將下面代碼中的.wrap::before換成.wrap的兄弟元素的選擇器即可）

.wrap{
display:inline-block;
vertical-align: middle;
}
.wrap::before{ //或者::after
content: "";
display: inline-block;
height: 100%;
display:inline-block;
vertical-align: middle;
}

注意：

    • vertical-align大部分取值是相對於父元素來說的

例如vertical-align:baseline（vertical-align的默認值）是相對於父元素的基線對齊。父元素的基線取值有以下規則：

      • inline類——小寫字母x的底端
      • inline-block類，其內沒有inline類型——盒子模型的底端
      • inline-block類，其內有inline類型時——其內最後一行inline元素的基線（即最後一行小寫x的底端）
    • 設置為middle也不一定是真正的對齊，某些字體的中線位置不一定頂部和底部的正中間。
    • 不同風格的字體常有不同的排版標準，因此有不同的基線/中線/頂線等，多種字體混合排版會讓基線發生變化（參看父元素的基線取值規則）。
  • 表格單元格（table-cell）元素

在單元格上設置vertical-align:middle，其內部內容將垂直居中。

  • ::first-letter 和 ::first-line 偽元素 （同第一條行內元素）

塊級元素居中

block、list-item、inline-block等元素如何在其父元素中居中。

margin/padding值設置居中

最基礎的方法是設置精確的padding（父元素上）或margin（子元素上）值使得子元素居中，這裡不再示例。

clac計算數值

margin值為 父容器寬/高的50% 減去 自身寬/高的50%：

.center{
width: 20rem;height: 20rem;
margin-left:calc(50% - 10rem);
margin-top:calc(50% - 10rem);
}

注意：inline水平的元素margin/padding設置僅在左右方向上有效。

margin:0 auto左右居中

要居中的塊級元素（block）元素設置margin:0 auto 。

注意：對浮動元素、絕對定位和固定定位的元素無效 。（注意：使用絕對定位+偏移量0+margin:auto方法中使用了四個方向的值為0偏移量例外）

附：

注意margin/pading

百分比值參照其包含塊的寬度進行計算

因此使用margin:auto並不能實現垂直方向上的居中，垂直居中最好不要使用margin/pading來實現。（當然如果確切知道父容器的高度，使用精確的margin/pading數值來實現不再此討論之列）

position:absolute居中

在父元素上設置定位，再在要居中的子元素上使用絕對定位進行居中。

最基礎的方法：計算出要居中的元素寬高與父容器寬高的差值，然後將差值除以2得到精確的值，再用以設置精確的水平和垂直偏移量；

其次是設置水平和垂直偏移量鴿50%，然會設置水平和垂直的負margin值——取值分別為要居中的子元素寬高的半。

以上方法均需要使用容器寬高的確切值，靈活性較差，以下方法更為靈活：

偏移量50%+負margin值

設置50%的水平和垂直偏移，然後設置的margin-top和margin-left值是要居中元素自身寬/高的一半的負數 ：

.wrap {
position: relative;
}
.center {
position: absolute;
height: 100px;width:100px;
top: 50%;left:50%;
margin-top:-50px;
margin-left:-50px;
}

偏移量50%+負50%translate值

使用位移transform:translate，將設置了50%偏移的子元素」往回」移動自身寬高的一半：

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

偏移量0+margin:auto

父元素設置相對或絕對定位；要居中的子元素設置絕對定位，所有偏移量為0，外邊距為auto：

.wrap{
positon:relative;
}
.center{
positon:absolute;
top:0;bottom:0;left:0;right:0;
margin:auto;
}

flex彈性布局居中

父元素設置為彈性盒子（容器），子元素就成為了彈性元素，利用flex相關屬性進行居中。

  • 在父元素上設置相關屬性即可使子元素居中：

.wrap{
display:flex; /*使用flex盒子*/
justify-content:center;/*水平軸上居中*/
align-items:center;/*垂直軸上居中*/
}

  • 父元素設置為彈性容器display:flex，子元素設置magrin:auto ：

.wrap{
display:flex;
}
.child{
margin: auto;
}

注意：

  • 如果有多個彈性子元素，默認情況下彈性子元素會成一橫排分布在父元素容器中，因為
  1. flex默認將子元素水平排列到一行（flex-direction:row），使用flex-direction:column可以使子元素垂直排成一列。
  2. flex默認子元素不折行顯示（flex-wrap: nowrap ），使用flex-wrap: wrap可使子元素自動折行顯示（當一行寬/高度不足容下多個子元素時折行為多行/列）。
  • align-items和align-content區別：
    • align-content屬性只適用於多行子元素（超過一行）的flex容器，如果只有一行子元素，該屬性不起作用；align-items適用於任意行子元素的flex容器。
    • align-content是設置一列子元素在整個縱軸上的對其方式；而align-items是設置每個子元素在該行的高度範圍內的側軸上的對齊方式（垂直對齊）。

align-items相當於將側軸高度按行平分，設置的是子元素在該行高度上的對其方式。

object-fit和object-postion居中

object-fit 只能用於可替換元素(replaced element) ，用以

指定替換元素的內容應該如何適應到其使用的高度和寬度確定的框。

一般用做圖片的樣式。它有著類似background-image的用法：

.center{
object-fit:fill|cover|contain|none|scale-down;
/*其屬性值，分別是填充（默認）、包含、覆蓋（可能被裁剪）、無變化（保持原狀）和等比例縮放*/
}

而object-positon屬性默認值是50% 50%，也就是居中(也就是要求居中的情況不用寫這個屬性了……），對元素定位控制，類似background-postion。

grid網格布局居中

根據需要布局網格，將要居中的元素「擺放」在網格中間即可。

示例製作3x3的表格內元素居中：

.wrap{
display:grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.center{
grid-row: 2;
grid-column: 2;
}

表格內容居中

  • 表格式布局：根據語義化原則，使用表格布局非表格的內容已不再合適，而且表格的& &標籤的align和valign屬性已經是HTML的廢除標籤屬性，建議不要使用。
  • 非表格元素模擬表格：可以使用display:table-cell 模擬其為一個表格，由於不建議使用廢除的align和valign標籤屬性，故而也就vertical-align:middle 垂直居中具有實用性，將元素模擬成表格進行垂直居中意義也不大了，因此建議不要使用。
  • 真正的表格，表格內容的居中：
    • 水平：text-align:center
    • 垂直：vertical-align:middle
    • 也可以使用margin/pading等其他方法來控制表格內容的居中

&
&
&
&
&垂直居中&
& html, body {
padding: 0;
margin: 0;
height: 100%;
}

.div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

& &
&
&
666
& &
&

圖片垂直居中方法：

css代碼

&

span{ height:100% width:0px; display:inline-block; vertical-align:middle;}

img{vertical-align:middle;}

&

html代碼

&&&&&

對於大多數人熟知的行內元素和塊狀元素的那些居中方法我不想再說；我只說說有難度的，面試大多會問到的幾個浮動元素的垂直居中方案；

對於浮動元素的水平垂直都居中的方案分為兩種：

第一：

#parent{width：400px;

height:400px;

position:relative;}

#child{width:200px;height:200px;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}

以上是已知子元素的高寬的情況下，注意這裡的父元素的高寬你可以隨便設置，我只是為了方便說明期間就設置了個400，還有這裡的margin-top和margin-left的值，只要是元素高寬的一半就可以了，比如margin-top的值就是高的一半，而margin-left就是寬的一半，記得這裡要在值前面加負號哦；親自試驗多次，絕對有效；

第二：

#parent{width：400px;height：400px;position:relative;}

#child{max-width:300px;max-height:300px;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0}

這裡使用max-width和max-height是為了有一個相對的參考，不然元素默認會充斥到整個父元素中；這是在元素的寬度和高度未知的情況下；第二個順便也解決了2014年阿里前端的一道面試題；

接下來要說的是圖片的垂直居中，也分兩種情況，一種是嵌套在上面的子div中的，一種就是普通情況；

對於第一種，嵌套在子div中的，方法和子div在父div中垂直居中的做法類似；至於有人說給img標籤怎麼設置margin等等的呢？您別急，css中，只要給一個元素設置了position為absolute，或者float：left或者float：right；那麼它的display屬性默認就會變成inline-block，所以可以放心大膽地設置margin；

第二種就是普遍的做法即：父div設置為display：table-cell，和vertical-align：middle；然後給圖片設置為vertical-align:middle就可以了，這個想必大家都知道；

再補充一個就是父元素高度確定的多行文本的垂直居中方法是設置容器的display為table-cell，設置vertical-align為middle就可以了。

我就不多說了。

我在自己的個人博客中對這個問題做了一個總結，詳見這裡：

總結html中垂直居中的方案 | 馬齡陽的個人網站

css垂直居中，如果兼容各個瀏覽器的話，我還沒有見過。

在百度裡面搜了很多，代碼都不健壯，最終都是用js來實現的。

最主要的CSS樣式

.login{

width:631px;

height:314px;

margin-top:-157px;

margin-left:-316px;

position: absolute;

top:50%;

left:50%;

background:url(images/mod.gif);

}

使用 絕對定位

然後margin-top選取div height的一半值

margin-left 選取div width的一半值

詳細請看這裡：http://blog.forecho.com/?p=431

推薦閱讀：

※關於 HTML5 被簡稱做 H5 ，你怎麼看？
※w3.org 結構複雜，信息量大，新人從哪裡入手比較好？
※7500 元的 HTML 速成班效果好嗎？學會 HTML 後能通過自學快速掌握 PHP 嗎？
※LESS到底好不好?
※python中的beautifulsoup和xpath有什麼異同點？

TAG:HTML | CSS |