初始代碼：
<div class="container">
<div class="content"></div>
</div>
.container {
background-color: gray;
height: 30rem; /* 高度可以隨意變化 */
}
.content {
background-color: wheat;
height: 10rem;
width: 10rem;
}
最終效果：
css-center.png
1. 用margin: auto的方法
原理：
- margin: auto 常用于設(shè)置水平居中孽查。它會為元素自動填充可用空間。
但是對于以下情況不起作用：
| 元素 | Position |
|---|---|
| 內(nèi)聯(lián)元素 | float |
| 浮動元素 | inline |
| 塊級元素 | absulute/fixed |
- 當我們通過通過 position:absolute 和 top:0 bottom:0 來給元素的垂直方向拓展設(shè)置可用空間故慈， 那么該元素可自動填充父級元素的可用尺寸。
- 代碼實現(xiàn)：
.container {
position: relative; /* 設(shè)置父元素position為relative */
}
.content {
position: absolute;
top: 0; /* 設(shè)置四個方向是位置為0 */
left: 0;
right: 0;
bottom: 0;
margin: auto; /* 利用margin: auto實現(xiàn)垂直居中 */
}
2. 用top: 50%; 加上 translateY(-50%)
原理：
這種方式實現(xiàn)起來比較簡單框全，但是前提是不需要做別的transform改動察绷。代碼實現(xiàn)：
.container {
position: relative; /* 設(shè)置父元素position為relative */
}
.content {
position: absolute;
top: 50%; /* 設(shè)置子元素的起始位置為父元素垂直方向50%的位置 */
transform: translateY(-50%); /* 再往上平移子元素高度的50% */
/* 這兩條可以同時實現(xiàn)水平居中
transform: translate(-50%, -50%);
left: 50% */
}
3. display: flex加上margin: auto
- 原理：
flex 容器中默認存在兩根軸：主軸和交叉軸。默認的主軸是水平軸津辩。通過控制子元素對這兩根軸的對齊方式拆撼。可以比較輕松地實現(xiàn)居中喘沿。
將父元素設(shè)置為 flex 容器闸度，再加上margin: auto來同時實現(xiàn)水平和垂直居中。這個方法可以說是最簡單的蚜印。 - 代碼實現(xiàn)：
.container {
display: flex; /* 設(shè)置父元素設(shè)置為flex容器 */
}
.content {
margin: auto;
}
4. 通過設(shè)置 flex 容器的justify-content和align-items兩個屬性來實現(xiàn)
- 原理：
flex 布局中的兩個屬性justify-content：定義了元素在主軸的對齊方式莺禁，align-items：定義了元素在交叉軸的對齊方式。
通過把兩個對齊方式都設(shè)置為center,來實現(xiàn)居中對齊 - 代碼實現(xiàn)
.container {
display: flex;
justify-content: center;
align-items: center;
}
5. 通過設(shè)置 flex 中子元素的align-self屬性
- 原理：
在 flex 布局中窄赋，可以通過設(shè)置子元素的align-self來單獨定義對齊方式哟冬。它和align-items的區(qū)別是：它是定義在子元素上楼熄，會覆蓋 flex 容器中定義的align-items屬性
- 代碼實現(xiàn)
.container {
display: flex; /* 設(shè)置父元素設(shè)置為flex容器 */
}
.content {
align-self: center;
margin: 0 auto; /* 實現(xiàn)水平居中,flex布局不支持justify-self */
}
6. grid 布局+margin:auto
原理
grid 網(wǎng)格布局，將元素分為行和列浩峡，是一種二維布局孝赫。它常用于實現(xiàn)我們現(xiàn)在流行的瀑布流顯示模式。
在實現(xiàn)居中上红符，它和 flex 布局實現(xiàn)居中的原理很像青柄。先確認容器，然后再通過相應屬性來設(shè)置子元素的對齊方式预侯。代碼實現(xiàn)
.container {
display: grid;
}
.content {
margin: auto;
}
7. grid 布局致开，設(shè)置容器的align-content和justify-items
原理
justify-content屬性設(shè)置整個內(nèi)容區(qū)域在容器里面的水平位置，align-content屬性設(shè)置整個內(nèi)容在容器的垂直位置萎馅。代碼實現(xiàn)
.container {
display: grid;
align-items: center;
justify-content: center;
}
8. grid 布局双戳，單獨設(shè)置子元素的對齊方式
- 代碼實現(xiàn)
.container {
display: grid;
}
.content {
justify-self: center; /* 設(shè)置子元素垂直居中 */
align-self: center; /* 設(shè)置子元素水平居中*/
}
總結(jié)：
無論是垂直居中或者水平居中，要點是：
- 先確認參照物糜芳，比如說
position:relative的父元素,flex 容器或者 grid 容器飒货，甚至還有我們這篇文章中沒有提到的 table 布局 - 再根據(jù)參照物進行居中，一個是通過
marin：auto來對可用空間的自動填充峭竣√粮ǎ或者是通過一些控制對齊的屬性來實現(xiàn)居中。
