css元素居中指南

若有錯誤，歡迎指正。更多內容查看 GitHub

1、元素分類

首先要知道元素分三種：內聯元素（行內元素）、塊級元素、內聯塊級元素。

一、內聯（行內）元素

• 可與其餘元素佔一行
• 高、行高、內外邊距不可更改
• 寬度爲內容所佔寬度，不可更改
• 容納文本或其餘行內元素

二、塊級元素

• 獨佔一行
• 高、行高、內外邊距可更改
• 不設置寬度的話寬度默認爲容器的100%
• 可容納行內元素和塊級元素

三、內聯塊級元素

• 可與其餘元素在一行
• 高、寬、行高以及上下邊距可更改

常見內聯（行內）元素：

• a - 錨點
• b - 粗體
• br - 換行
• cite - 引用
• code - 計算機代碼
• em - 強調
• i - 斜體
• img - 圖片
• input - 輸入框
• label - 表格標籤
• span - 經常使用內聯容器，定義文本內區塊
• strike - 中劃線
• strong - 粗體強調
• sub - 下標
• sup - 上標
• textarea - 多行文本輸入框

常見塊級元素：

• address - 聯繫方式
• audio - 音頻
• vedio - 視頻
• article - 文章
• blockquote - 塊引用
• div - 文檔分區
• form - 表單
• section - 頁面區段
• h1 - 大標題
• h2 - 副標題
• h3 - 3級標題
• h4 - 4級標題
• h5 - 5級標題
• h6 - 6級標題
• hr - 水平分隔線
• header - 頁頭
• menu - 菜單列表
• ol - 排序列表
• ul - 非排序列表
• p - 段落
• table - 表格

常見的內聯塊級元素有：

• img - 圖片
• input - 輸入

好比：

img{display: inline-block;}

2、水平居中

一、內聯元素水平居中

（1）父級爲塊級元素的內聯元素使用text-align: center

p{
  background-color: cyan;
  text-align: center;
}
<p>我是內聯文本</p>

能夠看到塊級元素p是默認寬度是整個容器的100%，而且其容納的文本是內聯元素，使用text-align: center讓其水平居中。

text-align: center僅對內聯元素有效，包括內聯塊級元素。好比對inline, inline-block, inline-table, inline-flex的元素一樣有效，由於inline-block值將內部div顯示爲嵌入式元素和塊，所以外部div中的屬性text-align將內部div居中。

二、塊級元素水平居中

（1）單個塊使用margin: 0 auto

有時須要居中的不是文本，而是整個塊。咱們但願左右邊距相等，方法是將邊距設置爲「auto」。

這一般用於固定寬度的塊，若是塊自己是靈活的，它將佔用全部寬度，固然，居中效果可能就不明顯了，由於它佔了整個寬度。

不管正在居中的塊級別元素或父元素的寬度是多少，這都是有效的。

.block {
    width: 200px;
    margin: 0 auto;
    background-color: aquamarine;
}
<div class="block">我是一個塊，設寬度可見居中效果，不設寬度佔滿整個可用寬度</div>

（2）父級爲塊級元素的塊級元素水平居中

1）使用table佈局加左右邊距自適應

由於塊級元素設爲表格佈局以後，將塊級變爲了內部單元格

.child-3 {
    display: table;
    margin: 0 auto;
}

<div class="child">塊級元素(display:table) + (margin:0 auto)</div>

2）多個塊級元素在一行居中

當想讓多個塊級元素在一行內居中時，有兩種辦法：

第一種：將塊級元素變爲內聯塊級元素：display: inline-block

當把多個塊級元素變爲內聯塊級元素時，就可使用內聯元素居中的辦法text-align: center;居中了：

.box {
    text-align: center;
    background-color: aquamarine;
}
.inline-block {
    width: 100px;
    height: 50px;
    border: 1px #333 solid;
    display: inline-block;
}
<div class="box">
    <p class="inline-block">塊級1</p>
    <p class="inline-block">塊級2</p>
    <p class="inline-block">塊級3</p>
</div>

給每一個塊級元素設置寬高只是爲了顯示效果。

第二種：使用flex佈局

.box {
    display: flex;
    justify-content: center;
}
.box-child {
    width: 100px;
    height: 50px;
    text-align: center; // 是爲了把塊級元素中的內聯文本居中
    border: 1px #333 solid;
}

<div class="box">
    <p class="box-child">塊級1</p>
    <p class="box-child">塊級2</p>
    <p class="box-child">塊級3</p>
</div>

3）多個塊級元素在一列居中

這個也屬於塊級中的塊級水平居中。

.box p{
    margin: 0 auto;
}
.box-child {
    width: 100px;
    height: 50px;
    text-align: center; // 是爲了把塊級元素中的內聯文本居中
    border: 1px #333 solid;
}
<div class="box">
    <p class="box-child">塊級1</p>
    <p class="box-child">塊級2</p>
    <p class="box-child">塊級3</p>
</div>

（3）定位塊級元素：父相子絕 + transform

父元素使用相對定位，子元素使用絕對定位。

使用了相對定位，就有指定的top，bottom，left，和right。子元素的對象使用絕對定位是以設置相對定位的父元素爲基礎偏移的，若是沒有設置相對定位的父元素，就以文檔爲基礎進行偏移。

因爲絕對定位是脫離文檔流的，最好儘可能避免使用。

在對使用絕對定位的元素居中時，若是該元素有固定大小，在偏移後，僅需使用邊距進行補償便可。步驟以下：

• 需居中元素設置left: 50%，這使該元素的左邊緣與父元素50%的線對齊。
• 添加一個負邊距，大小爲元素寬度的一半，使得該元素的一半往左移動，中心點與父元素50%線對齊。

使用transform時，須要兼容瀏覽器。

.parent {
    position: relative;
}
/* 注意兼容 */
.child-4-1 {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
}
<div class="parent">
    <div class="child">定位塊級元素(父相子絕)</div>
</div>

三、浮動元素水平居中

浮動float是CSS中最經常使用的佈局技術，當使用float: left設置元素樣式時，以後元素將從新排版。文檔流是指內容的順序以及元素之間如何排列。若是被浮動的元素沒有設置寬度，它將摺疊爲內容的寬度。若是以後的元素比剩餘的空間更小，它將向右移動。請記住，設置爲display: block的元素須要有一個固定寬度，不然它將獨佔一行。

能夠經過在樣式表中爲元素提供一個clear屬性來防止元素從新排版。好比clear: both、clear: left和clear: right，還可使用clear: none來覆蓋默認行爲。

由於被浮動的子元素會致使父元素崩潰，因此你會很想同時建立新元素來添加clear:防止這種行爲。雖然這是可行的，但咱們但願保持標記的語義性，所以應該只使用CSS來實現。經過使用僞元素::after能夠建立一個清除浮動clearfix：

.container::after {
    clear: both;
    content: '';
    display: table;
}

浮動適合大型容器，不太適用於文本元素，由於它很難對齊。使用display: inline-block更適合，請參考上方的內聯元素水平居中。

想要是浮動的元素居中怎麼辦呢，只有向左向右浮動，沒有向中間浮動，這須要一箇中間線，因此設置給浮動元素設置一個父元素，以父元素的中間線爲居中標準便可。

（1）浮動元素指定寬：位相 + 負寬一半margin

若是浮動元素須要指定寬度，則在浮動的時候須要以寬度的一半值爲負邊距補償。

.child {
    position: relative;
    float: left;
    width: 250px;
    left: 50%;
    margin-left: -125px;
}
<div class="parent">
    <div class="child">
        指定寬度：子位相左浮，負一半寬度margin
    </div>
</div>

（2）浮動元素不指定寬：父子位相左浮，左右各50%

.parent {
    position: relative; // 位相
    float: left;        // 左浮
    left: 50%;           // 左50%
}
.child-2-2--p {
    position: relative; // 位相
    float: left;        // 左浮
    right: 50%;           // 右50%
}

<div class="parent">
    <div class="child">
        不指定寬度：父子位相左浮，左右各50%
    </div>
</div>

（3）浮動元素通用（有無定寬皆可）：flex

.parent {
    display:flex;
    justify-content:center;
}
.chlid{
    float: left;
}
<div class="parent">
  <span class="chlid">有無定寬皆可： flex</span>
</div>

如下是例子效果：

3、垂直居中

一、內聯元素垂直居中

（1）單行內聯元素

1）使用填充

有時候，內聯/文本元素能夠垂直居中顯示，僅僅是由於它們的上下填充相同。

.parent {
    padding-top: 10px;
    padding-bottom: 10px;
}

.child {
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}
<div class="parent">
    <span class="child">一、單行行內元素使用上下填充相同實現垂直居中</span>
</div>

2）使用行高

若是沒有填充能夠選擇時，可使用行高

.parent {
    background-color: aquamarine;
}
.child {
    height: 50px;
    line-height: 50px;
}

<div class="parent">
    <span class="child">一、單行行內元素使用行高實現垂直居中</span>
</div>

（2）多行內聯元素

1）使用dispaly:table

多行內聯元素也可使用上下相同的填充實現居中效果，但若是這不起做用，可能文本所在的元素能夠是一個表格單元格，或者是字面上的表格單元格，亦或者是用CSS建立的表格單元格。

.parent {
    height: 100px;
    background-color: cyan;
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

<div class="parent">
    <p class="child">三、多行行內元素父級使用dispaly:table (Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>

2）使用flex

記住，只有父容器有固定高度時，才能夠實現。

.parent {
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100px;
}

<div class="parent">
    <p class="child">四、多行行內元素父級使用flex-direction:column (Lorem ipsum, dolor sit amet consectetur
adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>

3）使用僞元素

.parent {
    position: relative;
    background-color: thistle;
}
.parent::before {
    content: '';
    vertical-align: middle;
}
.child {
    display: inline-block;
    vertical-align: middle;
}

<div class="child-pseudo">
    <p class="child-pseudo--p">五、多行行內元素父級使用僞元素 (Lorem ipsum, dolor sit amet consectetur
adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>

二、塊級元素垂直居中

（1）定高：父相子絕 + 上50% + 負上高度一半margin

.parent {
    position: relative;
    background-color: coral;
}
.child {
    position: absolute;
    height: 25px;
    top: 50%;
    margin-top: -12.5px;
}
<div class="parent">
    <div class="child">一、父位相，子絕+指定高度+top50%+負高度一半margin</div>
</div>

（2）高度未知： 三種方法

1）父相子絕 + 上50% + 上偏移50%

.parent {
    position: relative;
    background-color: coral;
}
.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
<div class="parent">
    <div class="child">一、父位相，子絕+指定高度+top50%+負高度一半margin</div>
</div>

2）父級table佈局 + 子table-cell + vertical-align: middle

.parent {
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}
<div class="parent">
    <div class="child">高度未知：父級table-cell + 子vertical-align: middlemargin</div>
</div>

3）父級flex + align-items:center

.parent {
    display: flex;
    align-items: center;
}
<div class="parent">
    <div class="child">高度未知：父級flex+align-items:center</div>
</div>

4）父級flex+flex-direction + justify-content

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
<div class="parent">
    <div class="child">高度未知：父級flex+flex-direction + justify-content</div>
</div>

如下是垂直居中全部效果：

4、水平垂直居中

一、定寬高 ： 父相+子絕左上50%負margin左上負一半高度

.parent {
    position: relative;
}

.child {
    width: 500px;
    height: 100px;

    position: absolute;
    top: 50%;
    left: 50%;

    margin: -50px 0 0 -250px;
}
<div class="parent">
    <div class="child">父相子絕 + transform</div>
</div>

二、寬高未知：父相子絕 + transform

.parent {
    position: relative;
}

.child {
    position:absolute;
    left:50%; 
    top:50%;
    transform: translate(-50%,-50%); 
}
<div class="parent">
    <div class="child">父相子絕 + transform</div>
</div>

三、父flex + justify-content + align-items

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class="parent">
    <div class="child">父flex + justify-content + align-items</div>
</div>

四、父grid/flex + 子magin:auto

.parent {
    /* display: flex; */
    display: grid;
    height: 50px;
    background-color: darksalmon;
}
.child {
    margin: auto;
}
<div class="parent">
    <div class="child">父grid/flex + 子magin:auto</div>
</div>

五、父table-cell佈局 + vertical-align + text-align

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div class="parent">
    <div class="child">父table-cell佈局 + vertical-align + text-align</div>
</div>

六、父相子絕 + 上下左右0 + margin:auto

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

<div class="parent">
    <div class="child">父相子絕 + 上下左右0</div>
</div>

如下是例子效果：

參考：

centering-css-complete-guide

Positioning Elements on the Web