css實作垂直居中的方式-有解無憂

使用絕對定位和負外邊距對塊級元素進行垂直居中

HTML

<div id="box">
    <div id="child"></div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 150px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    margin: -50px 0 0 0; 
}
復制代碼

https://user-gold-cdn.xitu.io/2018/1/15/160f9eb87ee9d9ae?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

這個方法兼容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實作垂直居中，

使用絕對定位和transform

HTML

<div id="box">
    <div id="child">test vertical align</div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    background: orange;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
復制代碼

[data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300"></svg>](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300"></svg>)

這種方法有一個明顯的好處就是不必提前知道被居中元素的尺寸了，因為 transform 中 translate 偏移的百分比就是相對于元素自身的尺寸而言的，

另外一種使用絕對定位和負外邊距進行垂直居中的方式

HTML

<div id="box">
    <div id="child">test vertical align</div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 50%;
    height: 30%;
    background: orange;
    position: absolute;
    top: 50%;
    margin: -15% 0 0 0;
}
復制代碼

[data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="301"></svg>](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="301"></svg>)

這種方式的原理實質上和前兩種相同，補充的一點是：margin 的取值也可以是百分比，這時這個值規定了該元素基于父元素尺寸的百分比，可以根據實際的使用場景來決定是用具體的數值還是用百分比，

絕對定位結合margin: auto

HTML

<div id="box">
    <div id="child">test vertical align</div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 200px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 100px;
}
復制代碼

https://user-gold-cdn.xitu.io/2018/1/15/160f9ee17f356035?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

這種實作方式的兩個核心是：把要垂直居中的元素相對于父元素絕對定位，top和bottom設為相等的值，我這里設成了0，當然也可以設為 99999px 或者 -99999px 無論什么，只要兩者相等就行，這一步做完之后再將要居中元素的 margin 屬性值設為 auto，這樣便可以實作垂直居中了，

被居中元素的寬高也可以不設定，但不設定的話就必須是圖片這種自身就包含尺寸的元素，否則無法實作，

使用padding實作子元素的垂直居中

HTML

<div id="box">
    <div id="child"></div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    background: #ddd;
    padding: 100px 0;
}
#child {
    width: 200px;
    height: 100px;
    background: orange;
}
復制代碼

https://user-gold-cdn.xitu.io/2018/1/15/160f9ee69a0169ad?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

這種實作方式非常簡單，給父元素設定相等的上下內邊距，子元素自然是垂直居中的，當然這時候父元素是不能設定高度的，要讓它自動被填充起來，除非設定了一個正好等于上內邊距+子元素高度+下內邊距的值，否則無法精確垂直居中，

這種方式看似沒有什么技術含量，但其實在某些場景下也是非常好用的，

設定第三方基準

HTML

<div id="box">
    <div id="base"></div>
    <div id="child"></div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
}
#base {
    height: 50%;
    background: orange;
}
#child {
    height: 100px;
    background: rgba(131, 224, 245, 0.6); 
    margin-top: -50px;
}
復制代碼

https://user-gold-cdn.xitu.io/2018/1/15/160f9eee6c5ce615?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

這種方式也非常簡單，首先設定一個高度等于父元素高度一半的第三方基準元素，這時該基準元素的底邊線就是父元素縱向上的中分線，做完這些之后再給要垂直居中的元素設定一個 margin-top 屬性，值的大小是它自身高度的一半取負，則實作垂直居中，

使用flex布局

HTML

<div id="box">test vertical align</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: flex;
    align-items: center;
}
復制代碼

這種方式同樣適用于塊級元素：

HTML

<div id="box">
    <div id="child"></div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: flex;
    align-items: center;
}
#child {
    width: 300px;
    height: 100px;
    background: orange;
}
復制代碼

flex布局請參考阮一峰《felx布局教程》

flex也就是flexible，意為靈活的、柔韌的、易彎曲的，

元素可以通過設定 display:flex; 將其指定為 flex 布局的容器，指定好了容器之后再為其添加 align-items 屬性，該屬性定義專案在交叉軸（這里是縱向軸）上的對齊方式，可能的取值有五個，分別如下：

flex-start:：交叉軸的起點對齊
flex-end：交叉軸的終點對齊
center：交叉軸的中點對齊
baseline：專案第一行文字的基線對齊
stretch（該值是默認值）：如果專案沒有設定高度或者設為了auto，那么將占滿整個容器的高度

第二種使用彈性布局的方式

HTML

<div id="box">
    <div id="child"></div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#child {
    width: 300px;
    height: 100px;
    background: orange;
}
復制代碼

這種方式也是首先給父元素設定 display:flex; 設定好之后改變主軸的方向 flex-direction: column; 該屬性可能的取值有四個，分別如下：

row（該值為默認值）：主軸為水平方向，起點在左端
row-reverse：主軸為水平方向，起點在右端
column：主軸為垂直方向，起點在上沿
column-reverse：主軸為垂直方向，起點在下沿

justify-content 屬性定義了專案在主軸上的對齊方式，可能的取值有五個，分別如下（具體的對齊方式與主軸的方向有關，以下假定主軸方向為默認的從左到右）：

flex-start（該值是默認值）：左對齊
flex-end：右對齊
center：居中對齊
space-between：兩端對齊，各個專案之間的間隔均相等
space-around：各個專案兩側的間隔相等

使用 `line-height` 對單行文本進行垂直居中

HTML

<div id="box">test vertical align</div>
復制代碼

CSS

#box{
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}
復制代碼

要注意的是，line-height (行高) 的值不能設為 100%，我們來看看官方檔案中給出的關于 line-height 取值為百分比時候的描述：“基于當前字體尺寸的百分比行間距”，也就是說，這里的百分比并不是相對于容器元素尺寸而言的，而是相對于字體尺寸，

使用 `line-height` 和 `vertical-align` 對圖片進行垂直居中

HTML

<div id="box">
    <img src="smallpotato.jpg">
</div>
復制代碼

CSS

#box{
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}
#box img {
    width: 200px;
    height: 200px;
    vertical-align: middle;
}
復制代碼

vertical-align 并不像看起來那樣天真無邪，深入研究請參考張鑫旭我對CSS vertical-align的一些理解與認識

本例具體的實作原理請參考張鑫旭 CSS深入理解vertical-align和line-height的基友關系

使用 `display: table;` 和 `vertical-align: middle;` 對容器里的文字進行垂直居中

HTML

<div id="box">
    <div id="child">test vertical align</div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: table;
}
#child {
    display: table-cell;
    vertical-align: middle;
}
復制代碼

vertical-align 屬性只對擁有 valign 特性的 html 元素起作用，例如表格元素中的 <td> <th> 等等，而像 <div> <span> 這樣的元素是不行的，

valign 屬性規定單元格中內容的垂直排列方式，語法：<td valign="value">，value的可能取值有以下四種：

top：對內容進行上對齊
middle：對內容進行居中對齊
bottom：對內容進行下對齊
baseline：基線對齊

關于 baseline：基線是一條虛構的線，在一行文本中，大多數字母以基線為基準，baseline 值設定行中的所有表格資料都分享相同的基線，該值的效果在文本的字號各不相同時效果會更好，請看下例：

HTML

<div id="box">
    <div class="child">glory</div>
    <div class="child">glad</div>
    <div class="child">align</div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: table;
}
.child {
    display: table-cell;
    vertical-align: top;
    border-right: 1px solid orange;
}
.child:first-child {
    font-size: 30px;
}
.child:last-child {
    font-size: 50px;
}
復制代碼

[data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="301" height="300"></svg>](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="301" height="300"></svg>)

如果將 vertical-align 屬性的值修改為 baseline，效果更好：

使用 CSS Grid

HTML

<div id="box">
    <div class="one"></div>
    <div class="two">target item</div>
    <div class="three"></div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    display: grid;
}
.two {
    background: orange;
}
.one, .three {
    background: skyblue;
}
復制代碼

這種場景下使用 Grid Layout 非常方便，只需要設定 .one .three 兩個輔助元素即可，只是 Grid 布局現在瀏覽器支持度還比較低，

使用 CSS Grid 設定水平居中

HTML

<div id="box">
    <div></div>
    <div class="two">target item</div>
    <div></div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.two {
    background: orange;
}
復制代碼

同樣的添加兩個輔助元素，然后將 grid-template-columns 屬性值設定為 1fr 1fr 1fr，意為三列子元素等分全部可用寬度，

也會有這樣的場景，需要被居中的元素寬度已知，則：

HTML

<div id="box">
    <div></div>
    <div class="two">target item</div>
    <div></div>
</div>
復制代碼

CSS

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: grid;
    grid-template-columns: 1fr 211px 1fr;
}
.two {
    background: orange;
}
復制代碼

https://user-gold-cdn.xitu.io/2018/1/15/160f9f2b32ad0a43?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

#box 里的第一個 div 和最后一個 div 會平分全部剩余可用寬度，作為自身的寬度，即 (300px - 211px) / 2，各自 44.5px，

作者：呆里呆氣1

鏈接：https://juejin.cn/post/6844903550909153287

來源：掘金

著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255232.html

標籤：其他

上一篇：javaSSM框架之springMVC框架核心總結

下一篇：JavaScript設計模式之觀察者模式

css實作垂直居中的方式

使用絕對定位和負外邊距對塊級元素進行垂直居中

使用絕對定位和transform

另外一種使用絕對定位和負外邊距進行垂直居中的方式

絕對定位結合margin: auto

使用padding實作子元素的垂直居中

設定第三方基準

使用flex布局

第二種使用彈性布局的方式

使用 line-height 對單行文本進行垂直居中

使用 line-height 和 vertical-align 對圖片進行垂直居中

使用 display: table; 和 vertical-align: middle; 對容器里的文字進行垂直居中

使用 CSS Grid

使用 `line-height` 對單行文本進行垂直居中

使用 `line-height` 和 `vertical-align` 對圖片進行垂直居中

使用 `display: table;` 和 `vertical-align: middle;` 對容器里的文字進行垂直居中