十個(gè)CSS實(shí)現(xiàn)元素居中的方法匯總
在前端開(kāi)發(fā)工程師的日常生活中，使用 CSS 使元素居中是很常見(jiàn)的，這也是面試中經(jīng)常被問(wèn)到的問(wèn)題。
也許你已經(jīng)使用 flex 或 absolute + transform 來(lái)實(shí)現(xiàn)它，但你知道至少有 10 種方法可以做到元素居中嗎？因此，在今天的文章中，我為大家整理了10個(gè)關(guān)于實(shí)現(xiàn)元素居中的CSS技巧，希望可以幫助你提升CSS技術(shù)。
1、absolute + (-margin)
如果元素的寬度和高度已知，我們可以使用至少 3 種方法來(lái)使元素居中。例如，在下圖中，小貓的寬度和高度分別為“500px”和“366px”。我們應(yīng)該如何居中？
用 ‘a(chǎn)bsolute + (-margin) ` 很容易完成！代碼如下：
HTML
<div class="container">
<img class="cat" src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1584&q=80" alt="">
</div>
CSS
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* Key css */
position: relative;
}
.cat{
width: 500px;
height: 366px;
border-radius: 50%;
position: absolute;
/* Key css */
left: 50%;
top: 50%;
/* half the width */
margin-left: -250px;
/* half the height */
margin-top: -183px;
}
這種方法簡(jiǎn)單易懂，兼容性好，缺點(diǎn)是我們需要知道子元素的寬高。
演示地址：https://codepen.io/qianlong/pen/yLKXLxM
2、 absolute + margin auto
我們還可以通過(guò)將所有方向的距離設(shè)置為 0 ，并將邊距設(shè)置為自動(dòng)來(lái)使小貓居中。
CSS代碼如下：
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
position: relative;
}
.cat{
width: 500px;
height: 366px;
border-radius: 50%;
/* Key css */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
和第一種方法一樣，它的兼容性也很好，缺點(diǎn)是需要知道子元素的寬高。
演示地址：https://codepen.io/qianlong/pen/RwMgweO
3、absolute + calc
CSS3 帶來(lái)了 calc 計(jì)算屬性，它允許我們通過(guò)它來(lái)居中一個(gè)元素，代碼如下：
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
position: relative;
}
.cat{
width: 500px;
height: 366px;
border-radius: 50%;
position: absolute;
/* Key css */
top: calc(50% - 183px);
left: calc(50% - 250px);
}
這種方法的兼容性取決于calc的兼容性，缺點(diǎn)是需要知道子元素的寬高。
演示地址：https://codepen.io/qianlong/pen/zYWzYyR
4、flex
以上三種方法必須提前知道元素的寬高，但元素的寬高不確定怎么辦？于是就有了flex ，它非常適合這個(gè)。
HTML代碼：
<div class="container">
<span contenteditable="true" class="content">hello medium</span>
</div>
CSS代碼：
.container {
width: 400px;
height: 200px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* Key css */
display: flex;
align-items: center;
justify-content: center;
}
.content{
padding: 20px;
border-radius: 10px;
background-color: #e3c1a9;
color: #ffffff;
}
這真的很酷，我們可以用很少的代碼來(lái)居中一個(gè)元素，這是我最喜歡的使用方式。
演示地址：https://codepen.io/qianlong/pen/abYyzvG
5、grid
像 flex 一樣，grid 也可以非常方便地用于使元素居中。
CSS代碼：
.container {
width: 400px;
height: 200px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* Key css */
display: grid;
}
.content{
/* Key css */
align-self: center;
justify-self: center;
padding: 20px;
border-radius: 10px;
background-color: #e3c1a9;
color: #ffffff;
}
演示地址：https://codepen.io/qianlong/pen/dymzPMa
6、absolute + transform
使用變換，我們還可以在事先不知道元素的寬度和高度的情況下使元素居中。
CSS代碼：
.container {
width: 400px;
height: 200px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* Key css */
position: relative;
}
.content{
/* Key css */
position: absolute;
left: 50%;
top: 50%;
/* Key css */
transform: translate(-50%, -50%);
padding: 20px;
border-radius: 10px;
background-color: #e3c1a9;
color: #ffffff;
}
演示地址：https://codepen.io/qianlong/pen/KKovwgW
7、text-align + line-height + vertical-align
以上6種方式比較容易理解，在我們的工作中也經(jīng)常用到，接下來(lái)的 4 種方法似乎使用頻率較低，但也值得學(xué)習(xí)。
首先，我們可以將 span 的“display”屬性設(shè)置為“inline-block”。然后通過(guò)設(shè)置容器的text-align屬性為center，span元素可以水平居中。結(jié)合 line-height 和其他屬性使其垂直居中。
CSS代碼：
.container {
width: 400px;
height: 200px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* Key css */
text-align: center;
line-height: 200px;
font-size: 0px;
}
.content{
font-size: 16px;
/* Key css */
display: inline-block;
vertical-align: middle;
line-height: initial;
text-align: left;
padding: 20px;
border-radius: 10px;
background-color: #e3c1a9;
color: #ffffff;
}
演示地址：https://codepen.io/qianlong/pen/dymzPWL
8、css-table
CSS新的table屬性讓我們可以將普通元素變成表格元素的真實(shí)效果，通過(guò)這個(gè)特性，一個(gè)元素也可以居中。
CSS
.container {
width: 400px;
height: 200px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* Key css */
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
/* Key css */
display: inline-block;
padding: 20px;
border-radius: 10px;
background-color: #e3c1a9;
color: #ffffff;
}
演示地址：https://codepen.io/qianlong/pen/dymzPJE
9、writing-mode
過(guò)去，我習(xí)慣使用 write-mode 將內(nèi)容的布局方向更改為垂直。
但令人驚奇的是它還可以使元素居中，不過(guò)這種方法有點(diǎn)難理解，代碼量會(huì)比較多。
HTML代碼：
<div class="container">
<div class="content-wrap">
<span contenteditable="true" class="content">hello medium</span>
</div>
</div>
CSS代碼：
.container {
width: 400px;
height: 200px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* Key css */
writing-mode: vertical-lr;
text-align: center;
}
.content-wrap{
/* Key css */
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.content {
/* Key css */
display: inline-block;
margin: auto;
text-align: left;
padding: 20px;
border-radius: 10px;
background-color: #e3c1a9;
color: #ffffff;
}
演示地址：https://codepen.io/qianlong/pen/vYRJErY
10、table
最后，當(dāng)然，最后一種方式是最不推薦的方式，但我提到它只是作為學(xué)習(xí)的一個(gè)例子。我不建議你在工作中使用它，因?yàn)樗ㄔ谖铱磥?lái)有點(diǎn)）很糟糕。
HTML代碼：
<table>
<tbody>
<tr>
<td class="container">
<span contenteditable="true" class="content">hello medium</span>
</td>
</tr>
</tbody>
</table>
CSS代碼：
.container {
width: 400px;
height: 200px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* Key css */
text-align: center;
}
.content {
/* Key css */
display: inline-block;
padding: 20px;
border-radius: 10px;
background-color: #e3c1a9;
color: #ffffff;
}
演示地址：https://codepen.io/qianlong/pen/yLKoyqv
寫(xiě)在最后
以上就是我今天與你分享的10個(gè)關(guān)于CSS實(shí)現(xiàn)元素居中的小技巧，希望你能從中學(xué)到你想要的知識(shí)，如果你覺(jué)得它有用的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開(kāi)發(fā)的朋友，也許能夠幫助到他。
最后感謝你的閱讀，祝編程愉快，我們明天見(jiàn)。
