摘要：備份及更新說(shuō)明表示要被居中的元素，表示要居中的元素的父元素包含元素的元素。左右居中要居中的塊級(jí)元素元素設(shè)置。網(wǎng)格布局居中根據(jù)需要布局網(wǎng)格，將要居中的元素?cái)[放在網(wǎng)格中間即可。

[TOC]
備份及更新

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

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

對(duì)于文本內(nèi)容居中的情況，.wrap就是指包含文字的元素（例如文字 ，i標(biāo)簽就是.wrap ）。

文本內(nèi)容會(huì)在外部創(chuàng)建一個(gè)行框（line-box），可以將文本看作是一個(gè)（外框隱形）的行內(nèi)元素 ，line-box內(nèi)部可以包含普通文本框、inline-block元素、inline元素。

將文本內(nèi)容包含在一個(gè)容器中（‘父親’），然后再將該容器在另一個(gè)容器（‘祖父’）內(nèi)居中不看作是文本內(nèi)容居中，而是該文本內(nèi)容外部容器的居中（‘父親’在’祖父‘內(nèi)居中）。

須知某些情況不設(shè)置元素寬高、邊框色/背景，無(wú)法看出居中效果，也就無(wú)所謂居中與否。

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

inline元素，準(zhǔn)確來(lái)說(shuō)，是不可替換（non-replace）的inline元素，不能設(shè)置豎直方向上的margin和padding，下不贅述。（margin同理）

參看margin規(guī)定和padding規(guī)定 ，之所以不能設(shè)置margin/padding，是因?yàn)?/p>

padding的值是根據(jù)目標(biāo)元素的width計(jì)算出來(lái)的，而inline中的non-replace元素的width是不確定的。

CSS兼容性情況未作說(shuō)明，具體自行查閱caniuse。

推薦使用那些不必使用到精確數(shù)值（如50px，20rem這種情況，百分比值50%除外）的方法。

如何讓一個(gè)容器的行內(nèi)內(nèi)容（文本和行內(nèi)元素--inline/inlineblock）居中。（當(dāng)然inline-block比較特殊，即有行內(nèi)屬性，又有塊級(jí)屬性）

在塊級(jí)元素上設(shè)置text-align:center，其內(nèi)部的inline或inline-block的子元素以及文本內(nèi)容會(huì)在父元素內(nèi)居中。

line-height設(shè)置了行間的距離（行高），將要居中的元素的line-heigth值設(shè)置為和其塊級(jí)父元素的height值一樣時(shí)，其內(nèi)部?jī)?nèi)容會(huì)垂直居中。

用于單行的行內(nèi)元素的垂直居中

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

注意：

line-height不能使用負(fù)值

在塊級(jí)元素使用line-height是定義該元素基線之間的最小距離而不是最大距離。

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

行內(nèi)元素inline/linline-block/inline-table

多用于圖文排版，將圖片和文字進(jìn)行垂直對(duì)齊。

使用偽元素（也可以.wrap的父元素和兄弟元素進(jìn)行居中，將下面代碼中的.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;
}

注意：

直接對(duì)一個(gè)inline-block元素（block、list-item元素更不必說(shuō)）元素設(shè)置vertical-align:middle往往不能讓其內(nèi)部的達(dá)到預(yù)期的垂直居中效果，因?yàn)椋?/p>

vertical-align大部分取值是相對(duì)于父元素來(lái)說(shuō)的

例如vertical-align:baseline（vertical-align的默認(rèn)值）是相對(duì)于父元素的基線對(duì)齊，vertical-align: middle是相對(duì)與父元素的中線對(duì)齊（中線位置受到基線的影響）。

而父元素的基線取值有以下規(guī)則：

inline類：baseline就是文本的基線——基線的位置（當(dāng)前元素默認(rèn)字體的）小寫(xiě)字母x的底端，font-size和line-height都會(huì)對(duì)其產(chǎn)生影響。

inline-block類

正常流內(nèi)容的情況下，inline-block元素的baseline就是最后一個(gè)作為內(nèi)容存在的元素的baseline

在overflow屬性不為visible的情況下，baseline就是margin-box的下邊界

在沒(méi)有內(nèi)容但是內(nèi)容區(qū)還有高度的情況下，baseline還是margin-box的下邊界。

可替換元素（如img）

不管display設(shè)置為inline還是inline-block，其baseline都為margin-box

有多個(gè)baseline時(shí)（如不同的字體），以baseline最低者為準(zhǔn)。

設(shè)置為middle也不一定是真正的對(duì)齊，某些字體的中線位置不一定頂部和底部的正中間。

不同風(fēng)格的字體常有不同的排版標(biāo)準(zhǔn)，因此有不同的基線/中線/頂線等，多種字體混合排版會(huì)讓基線發(fā)生變化（參看父元素的基線取值規(guī)則）。

表格單元格（table-cell）元素

在單元格上設(shè)置vertical-align:middle，其內(nèi)部?jī)?nèi)容將垂直居中。

::first-letter 和 ::first-line 偽元素 （同第一條行內(nèi)元素）

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

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

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

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

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

要居中的塊級(jí)元素（block）元素設(shè)置margin:0 auto 。

注意：對(duì)浮動(dòng)元素、絕對(duì)定位和固定定位的元素?zé)o效 。（注意：使用絕對(duì)定位+偏移量0+margin:auto方法中使用了四個(gè)方向的值為0偏移量例外）

附：

注意margin/pading

百分比值參照其包含塊的寬度進(jìn)行計(jì)算

因此使用margin:auto并不能實(shí)現(xiàn)垂直方向上的居中，垂直居中最好不要使用margin/pading來(lái)實(shí)現(xiàn)。（當(dāng)然如果確切知道父容器的高度，使用精確的margin/pading數(shù)值來(lái)實(shí)現(xiàn)不再此討論之列）

在父元素上設(shè)置定位，再在要居中的子元素上使用絕對(duì)定位進(jìn)行居中。

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

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

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

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

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

使用位移transform:translate，將設(shè)置了50%偏移的子元素”往回”移動(dòng)自身寬高的一半：

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

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

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

父元素設(shè)置為彈性盒子（容器），子元素就成為了彈性元素，利用flex相關(guān)屬性進(jìn)行居中。

在父元素上設(shè)置相關(guān)屬性即可使子元素居中：

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

父元素設(shè)置為彈性容器display:flex，子元素設(shè)置magrin:auto ：

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

注意：

如果有多個(gè)彈性子元素，默認(rèn)情況下彈性子元素會(huì)成一橫排分布在父元素容器中，因?yàn)?/p>

flex默認(rèn)將子元素水平排列到一行（flex-direction:row），使用flex-direction:column可以使子元素垂直排成一列。

flex默認(rèn)子元素不折行顯示（flex-wrap: nowrap ），使用flex-wrap: wrap可使子元素自動(dòng)折行顯示（當(dāng)一行寬/高度不足容下多個(gè)子元素時(shí)折行為多行/列）。

align-items和align-content區(qū)別：

align-content屬性只適用于多行子元素（超過(guò)一行）的flex容器，如果只有一行子元素，該屬性不起作用；align-items適用于任意行子元素的flex容器。

align-content是設(shè)置一列子元素在整個(gè)縱軸上的對(duì)其方式；而align-items是設(shè)置每個(gè)子元素在該行的高度范圍內(nèi)的側(cè)軸上的對(duì)齊方式（垂直對(duì)齊）。

align-items相當(dāng)于將側(cè)軸高度按行平分，設(shè)置的是子元素在該行高度上的對(duì)其方式。

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

指定替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框。

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

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

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

根據(jù)需要布局網(wǎng)格，將要居中的元素“擺放”在網(wǎng)格中間即可。

示例制作3x3的表格內(nèi)元素居中：

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

表格式布局：根據(jù)語(yǔ)義化原則，使用表格布局非表格的內(nèi)容已不再合適，而且表格的 標(biāo)簽的align和valign屬性已經(jīng)是HTML的廢除標(biāo)簽屬性，建議不要使用。

非表格元素模擬表格：可以使用display:table-cell 模擬其為一個(gè)表格，由于不建議使用廢除的align和valign標(biāo)簽屬性，故而也就vertical-align:middle 垂直居中具有實(shí)用性，將元素模擬成表格進(jìn)行垂直居中意義也不大了，因此建議不要使用。

真正的表格，表格內(nèi)容的居中：

水平：text-align:center

垂直：vertical-align:middle

也可以使用margin/pading等其他方法來(lái)控制表格內(nèi)容的居中