CSS 居中完全指南

今天來看看在 CSS 中有哪些方法可以實(shí)現(xiàn)元素的居中！

一、水平居中

1. 內(nèi)聯(lián)元素

<div?class="container">
??<span?class="content">水平居中span>
div>

（1）text-align

text-align 一般運(yùn)用在塊級(jí)元素中，使其中的文本對(duì)齊。實(shí)際上，運(yùn)用在塊級(jí)元素中的text-align會(huì)使其包含的內(nèi)聯(lián)元素水平對(duì)齊。

.container?{
??text-align:?center;
}

2. 塊級(jí)元素

<div?class="container">
??<div?class="content">水平居中div>
div>

（1）margin

如果塊元素的高度和寬度已知，就可以通過將元素的左右margin值設(shè)置為auto將元素水平居中：

.content?{
??width:?100px;
??height:?100px;
??margin-left:?auto;
??margin-right:?auto;
}

如果有多個(gè)塊元素，需要將多個(gè)元素包裹在一個(gè)元素中以使用該方法實(shí)現(xiàn)水平居中：

<div?class="container">
??<div?class="box">
????<div?class="content">水平居中div>
????<div?class="content">水平居中div>
??div>
div>

.box?{
??display:?flex;
??margin-left:?auto;
??margin-right:?auto;
}

3. 通用

（1）Flex 布局

在 Flex 布局中，justify-content可以用于設(shè)置彈性盒子元素在主軸方向上的對(duì)齊方式。當(dāng)其屬性值為 center 時(shí)，其子元素整體會(huì)在主軸的中心位置。

.container?{
??display:?flex;
??justify-content:?center;
}

如果彈性盒子的主軸是垂直方向，可以使用align-items來代替justify-content以實(shí)現(xiàn)元素的水平居中：

.container?{
?display:?flex;
?flex-direction:?column
?align-items:?center;
}

（2）Grid 布局

在 Grid 布局中，justify-content 屬性會(huì)沿著行軸線（水平方向） 在網(wǎng)格容器中對(duì)齊網(wǎng)格。當(dāng)屬性值為center時(shí)，就可以將網(wǎng)格對(duì)齊到網(wǎng)格容器的水平居中位置。

.container?{
??display:?grid;
??justify-content:?center;
}

（3）絕對(duì)定位

可以通過將使用絕對(duì)定位和變換實(shí)現(xiàn)元素的水平居中：

.container?{
??position:?relative;
}

.content?{
??position:?absolute;
??left:?50%;
??transform:?translateX(-50%);
}

如果塊元素的寬度已知，也可以使用負(fù)邊距來代替transform：

.container?{
??position:?relative;
}

.content?{
??width:?100px;
??position:?absolute;
??left:?50%;
??margin-left:?-50px;
}

二、垂直居中

1. 塊級(jí)元素

<div?class="container">
??<div?class="content">垂直居中div>
div>

（1）絕對(duì)定位

可以通過將使用絕對(duì)定位和變換實(shí)現(xiàn)元素的垂直居中：

.container?{
??position:?relative;
}

.content?{
??position:?absolute;
??top:?50%;
??transform:?translateY(-50%);
}

如果塊元素的高度已知，也可以使用負(fù)邊距來代替transform：

.container?{
??position:?relative;
}

.content?{
??height:?100px;
??position:?absolute;
??top:?50%;
??margin-top:?-50px;
}

2. 通用

（1）Flex 布局

在 Flex 布局中，align-items 屬性用來定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。當(dāng)其屬性值為 center 時(shí)，元素位于容器的中心。

.container?{
??display:?flex;
??align-items:?center;
}

如果將Flex 的主軸切換為垂直方向，則需要使用justify-content來代替align-items以實(shí)現(xiàn)元素的垂直居中：

.flex?{
?display:?flex;
?flex-direction:?column;
?justify-content:?center;
}

（2）Grid 布局

使用 CSS Grid 布局中，可以使用 align-content 屬性將項(xiàng)目垂直居中到其網(wǎng)格區(qū)域。

.container?{
??display:?grid;
??align-content:?center;
}

如果將網(wǎng)格的排列方向更改為水平，垂直居中依舊是生效的：

.container?{
??display:?flex;
??align-content:?center;
?grid-auto-flow:?column;
}

三、水平垂直居中

<div?class="container">
??<div?class="content">水平垂直居中div>
div>

（1）絕對(duì)定位

使元素垂直居中最通用的方法就是使用絕對(duì)定位和transform：

.container?{
??position:?relative;
}

.content?{
??position:?absolute;
??top:?50%;
??left:?50%;
??transform:?translate(-50%,?-50%);
}

如果元素的高度和寬度已知，也可以使用margin來代替transform:

.container?{
??position:?relative;
}

.content?{
??width:?100px;
??height:?100px;
??position:?absolute;
??top:?50%;
??left:?50%;
??margin-top:?-50px;
??margin-left:?-50px;
}

（2）Flex 布局

在使用 Flex 布局時(shí)，可以結(jié)合上面的水平和垂直居中來實(shí)現(xiàn)水平垂直居中：

.container?{
??display:?flex;
??justify-content:?center;
??align-items:?center;
}

（3）Grid 布局

在 Grid 布局中，可以使用以下形式來實(shí)現(xiàn)元素的水平垂直居中：

.container?{
??display:?grid;
??place-items:?center;
}

place-content 屬性是align-content和justify-content的簡(jiǎn)寫，當(dāng)該屬性的值為center時(shí)，所有的子元素堆疊在父元素的中間對(duì)齊。