css元素居中指南

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

一、元素分類

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

1、內聯（行內）元素

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

2、塊級元素

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

3、內聯塊級元素

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

常見內聯（行內）元素：

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;}

二、水平居中

1、內聯元素水平居中

（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居中。

2、塊級元素水平居中

（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>

3、浮動元素水平居中

浮動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>

以下是例子效果：

三、垂直居中

1、內聯元素垂直居中

（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">1、單行行內元素使用上下填充相同實現垂直居中</span>
</div>

2）使用行高

如果沒有填充可以選擇時，可以使用行高

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

<div class="parent">
    <span class="child">1、單行行內元素使用行高實現垂直居中</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">3、多行行內元素父級使用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">4、多行行內元素父級使用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">5、多行行內元素父級使用僞元素 (Lorem ipsum, dolor sit amet consectetur
adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>

2、塊級元素垂直居中

（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">1、父位相，子絕+指定高度+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">1、父位相，子絕+指定高度+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>

以下是垂直居中所有效果：

四、水平垂直居中

1、定寬高：父相+子絕左上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>

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

.parent {
    position: relative;
}

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

3、父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>

4、父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>

5、父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>

6、父相子絕 + 上下左右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>