CSS 居中完全指南，你學(xué)會了嗎？
今天來看看在 CSS 中有哪些方法可以實現(xiàn)元素的居中!
一、水平居中
1. 內(nèi)聯(lián)元素
<div class="container">
<span class="content">水平居中</span>
</div>
(1)text-align
text-align 一般運用在塊級元素中，使其中的文本對齊。實際上，運用在塊級元素中的text-align會使其包含的內(nèi)聯(lián)元素水平對齊。
.container {
text-align: center;
}
2. 塊級元素
<div class="container">
<div class="content">水平居中</div>
</div>
(1)margin
如果塊元素的高度和寬度已知，就可以通過將元素的左右margin值設(shè)置為auto將元素水平居中：
.content {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
如果有多個塊元素，需要將多個元素包裹在一個元素中以使用該方法實現(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è)置彈性盒子元素在主軸方向上的對齊方式。當(dāng)其屬性值為 center 時，其子元素整體會在主軸的中心位置。
.container {
display: flex;
justify-content: center;
}
如果彈性盒子的主軸是垂直方向，可以使用align-items來代替justify-content以實現(xiàn)元素的水平居中：
.container {
display: flex;
flex-direction: column
align-items: center;
}
(2)Grid 布局
在 Grid 布局中，justify-content 屬性會沿著行軸線(水平方向) 在網(wǎng)格容器中對齊網(wǎng)格。當(dāng)屬性值為center時，就可以將網(wǎng)格對齊到網(wǎng)格容器的水平居中位置。
.container {
display: grid;
justify-content: center;
}
(3)絕對定位
可以通過將使用絕對定位和變換實現(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. 塊級元素
<div class="container">
<div class="content">垂直居中</div>
</div>
(1)絕對定位
可以通過將使用絕對定位和變換實現(xiàn)元素的垂直居中：
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
如果塊元素的高度已知，也可以使用負(fù)邊距來代替transform：
argin-top: -50px;}
2. 通用
2. 通用
(1)Flex 布局
在 Flex 布局中，align-items 屬性用來定義flex子項在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對齊方式。當(dāng)其屬性值為 center 時，元素位于容器的中心。
.container {
display: flex;
align-items: center;
}
如果將Flex 的主軸切換為垂直方向，則需要使用justify-content來代替align-items以實現(xiàn)元素的垂直居中：
.flex {
display: flex;
flex-direction: column;
justify-content: center;
}
(2)Grid 布局
使用 CSS Grid 布局中，可以使用 align-content 屬性將項目垂直居中到其網(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)絕對定位
使元素垂直居中最通用的方法就是使用絕對定位和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 布局時，可以結(jié)合上面的水平和垂直居中來實現(xiàn)水平垂直居中：
.container {
display: flex;
justify-content: center;
align-items: center;
}
(3)Grid 布局
在 Grid 布局中，可以使用以下形式來實現(xiàn)元素的水平垂直居中：
.container {
display: grid;
place-items: center;
}
place-content 屬性是align-content和justify-content的簡寫，當(dāng)該屬性的值為center時，所有的子元素堆疊在父元素的中間對齊。
