這是一篇關於居中對齊方式的總結 開篇之前，先問一下大家都知道幾種居中的實現方式？ 面試時答出來兩三個就不錯了，就怕面試官還讓你繼續說。今天就來總結一下這些居中的方式 使用flex佈局設置居中。 使用flex 時也能通過給子項設置margin: auto實現居中。 使用絕對定位的方式實現水平垂直居中。 ...
這是一篇關於居中對齊方式的總結
開篇之前，先問一下大家都知道幾種居中的實現方式？
面試時答出來兩三個就不錯了，就怕面試官還讓你繼續說。今天就來總結一下這些居中的方式
- 使用flex佈局設置居中。
- 使用flex 時也能通過給子項設置margin: auto實現居中。
- 使用絕對定位的方式實現水平垂直居中。
- 使用grid設置居中。
- 使用grid時還能通過給子項設置margin: auto實現居中。
- 使用tabel-cell實現垂直居中。
- 還有一種不常用的方法實現垂直居中。
- 最後還有一種奇葩的方法。容器設置position: relative。孩子設置 top、left、bottom、right都設置為0
1.flex佈局設置居中
常見的一種方式就是使用flex佈局設置居中。
利用彈性佈局(flex)，實現水平居中，其中justify-content 用於設置彈性盒子元素在主軸（橫軸）方向上的對齊方式
給容器設置：
-
display: flex;寫在父元素上這就是定義了一個伸縮容器 -
justify-content主軸對齊方式，預設是橫軸 -
align-items縱軸對齊方式，預設是縱軸
優點： 簡單、方便、快速，三行代碼搞定。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
align-items: center; // 縱軸對齊方式，預設是縱軸 子元素垂直居中
justify-content: center; //縱軸對齊方式，預設是縱軸
}
.child {
background: red;
}
</style>
2.flex-給子項設置
第一種方式是給父盒子設置屬性，這一種是給子盒子設置margin: auto實現居中。給容器設置 display: flex; 子項設置 margin: auto;
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
}
.child {
background: red;
margin: auto; // 水平垂直居中
}
</style>
3.絕對定位
使用絕對定位的方式實現水平垂直居中。容器設置position: relative。子元素設置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);
優點就是不用關心子元素的長和寬，但是這種方法相容性依賴translate2d的相容性
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: red;
}
</style>
4.tabel-cell實現垂直居中
css新增的table屬性，可以讓我們把普通元素，變為table元素的現實效果，通過這個特性也可以實現水平垂直居中
而且tabel單元格中的內容天然就是垂直居中的，只要添加一個水平居中屬性就好了
-
使用tabel-cell實現垂直居中,容器設置
display: table-cell;; -
vertical-align: middle屬性設置元素的垂直對齊方式 -
子元素如果是塊級元素，直接使用左右
margin:auto實現水平居中。如果是行內元素，給容器設置text-align: center
利用 text-align: center 可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素inline, 內聯塊inline-block, 內聯表inline-table, inline-flex元素水平居中都有效。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: table-cell;
vertical-align: middle; // 設置元素在垂直方向上的對齊方式
text-align: center;
}
.child {
background: red;
display: inline-block;
}
</style>
5.grid設置居中
- 使用grid設置居中。給容器設置
display: grid;align-items: center;justify-content: center;
通過給容器設置屬性，達到居中效果,但是這種方式相容性較差，不推薦。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-content: center;
}
.child {
background: red;
}
</style>
6.grid給子項設置
使用grid時還能通過給子項設置margin: auto;實現居中。給容器設置 display: grid; 子項設置 margin: auto;
某些瀏覽器會不支持grid佈局方式，相容性較差，不推薦。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
}
.child {
background: red;
margin: auto;
}
</style>
7.給容器加給偽元素
這是一種不常用的方法實現垂直居中。給容器加給偽元素，設置line-height等於容器的高度。給孩子設置display: inline-block;
此種方式適合給文本設置水平垂直居中
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
.box::after {
content: "";
line-height: 200px;
}
.child {
display: inline-block;
background: red;
}
</style>
8.還有一種奇葩的方法
這個奇葩方式和第三種使用絕對定位相似，只不過需要給子元素設置 position: absolute; 設置固定寬度和高度;top、left、bottom、right都設置為0; margin設置為auto；也能實現垂直水平居中。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child {
background: red;
width: 100px;
height: 40px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
以上就是一些我們常用的垂直居中的方案。
由於垂直居中往往需要修改display屬性，所以就會在排版上造成一些影響。例如不該用flexbox的地方如果用了flexbox，不該用table的地方用了table，不該用inline-block的地方用了inline-block，後續反而要多寫許多其他的定位樣式來修正，那就有點得不償失了。因此如何活用這些CSS垂直居中的方法，就要看大家的版面結構而靈活運用
