這是一篇關于居中對齊方式的總結
開篇之前，先問一下大家都知道幾種居中的實作方式？
面試時答出來兩三個就不錯了，就怕面試官還讓你繼續說，今天就來總結一下這些居中的方式
- 使用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 >
<div >水平垂直居中</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 >
<div >水平垂直居中</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 >
<div >水平垂直居中</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 >
<div >水平垂直居中</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 >
<div >水平垂直居中</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 >
<div >水平垂直居中</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 >
<div >水平垂直居中</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 >
<div >水平垂直居中</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垂直居中的方法，就要看大家的版面結構而靈活運用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499790.html
標籤：Html/Css