CSS 居中完全指南，你學(xué)會(huì)了嗎？
今天來(lái)看看在 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
如果塊元素的高度和寬度已知，就可以通過(guò)將元素的左右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來(lái)代替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ì)定位
可以通過(guò)將使用絕對(duì)定位和變換實(shí)現(xiàn)元素的水平居中：
.container {
position: relative;
}
.content {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
如果塊元素的寬度已知，也可以使用負(fù)邊距來(lái)代替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ì)定位
可以通過(guò)將使用絕對(duì)定位和變換實(shí)現(xiàn)元素的垂直居中：
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
如果塊元素的高度已知，也可以使用負(fù)邊距來(lái)代替transform：
argin-top: -50px;}
2. 通用
2. 通用
(1)Flex 布局
在 Flex 布局中，align-items 屬性用來(lái)定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對(duì)齊方式。當(dāng)其屬性值為 center 時(shí)，元素位于容器的中心。
.container {
display: flex;
align-items: center;
}
如果將Flex 的主軸切換為垂直方向，則需要使用justify-content來(lái)代替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來(lái)代替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é)合上面的水平和垂直居中來(lái)實(shí)現(xiàn)水平垂直居中：
.container {
display: flex;
justify-content: center;
align-items: center;
}
(3)Grid 布局
在 Grid 布局中，可以使用以下形式來(lái)實(shí)現(xiàn)元素的水平垂直居中：
.container {
display: grid;
place-items: center;
}
place-content 屬性是align-content和justify-content的簡(jiǎn)寫(xiě)，當(dāng)該屬性的值為center時(shí)，所有的子元素堆疊在父元素的中間對(duì)齊。
