元素垂直居中的n種方法
本文章收集了多種實現居中布局的方法,並且按照實現的時間線,從css2到css3的各種解決方案,從代碼量有少到多的排序來一一說明每種布局方法的實現方式,通過閱讀此文章能夠讓你解決平時的開發中遇到的各種布局問題。
使用line-height實現單行文本垂直居中
line-height
:用於設置多行元素的空間量,如多行文本的間距。對於塊級元素,它指定元素行盒(line boxes)的最小高度。對於非替代的 inline 元素,它用於計算行盒(line box)的高度。
.box-1{
height: 50px;
line-height: 50px;
}
<div class="box box-1">
這是要垂直居中的內容。
</div>
查看案例: https://codepen.io/qwguo88/full/dyYvBQv
使用inline-block元素和vertical-align特性實現垂直居中
此方法不限制元素的寬高,兼容性好
vertical-align
:用來指定行內元素(inline)或表格單元格(table-cell)元素的垂直對齊方式。
<div class="box">
<div class="content">
這是要垂直居中的內容。
</div>
</div>
.box{
text-align: center;
letter-spacing: -.3em;
}
.box::before{
content: '';
height: 100%;
width: 1px;
margin-right: -1px;
display:inline-block;
vertical-align: middle;
}
.content{
display:inline-block;
vertical-align: middle;
letter-spacing: normal;
}
查看案例: https://codepen.io/qwguo88/full/KKdmvdj
上面的案例通過利用display:inline-block
的高度100%於父級高度,再利用vertical-aling:middle
垂直居中屬性,讓行內塊級元素劇中與父級。在元素設置成行內塊級元素的時候代碼中如果元素后邊有空格,可以通過設置父級元素letter-spacing:-.3em
,然后在通過居中元素還原文字間隔,或者通過設置父級的font-size:0;
也可以取消空格的間距。其中紅色豎線是通過父元素的偽類設置的。
使用表格單元格和vertical-align特性實現垂直居中
<div class="box">
<div class="content">
這是要垂直居中的內容。
</div>
</div>
.box{
display: table-cell;
vertical-align: middle;
text-align:center;
}
.content{
display:inline-block;
}
此方法需要設置父級的父級為diaplay:table;
,並且設置父元素:display:table-cell
,然后在設置vertical-align:middle
,實現元素居中,但是此方法子元素需要是行內元素,和行內塊級元素;
查看案例: https://codepen.io/qwguo88/full/qBOmPaM
使用絕對定位absolute和margin負值
此方法用於固定寬高的元素,或者通過js獲取不固定元素寬高
<div class="box">
<div class="content">
這是要垂直居中的內容。
</div>
</div>
.box{
position: relative;
}
.content{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
此方法需要設置元素依照父級絕對定位,left和top都按照父元素50%定位。且需要知道要居中元素的寬高,也可以通過javascript獲取元素的寬高,並且設置margin
的上和左為負值元素寬高的一半;
使用絕對定位absolute和margin:auto
此方法需要設置居中元素為固定寬高
<div class="box">
<div class="content">
這是要垂直居中的內容。
</div>
</div>
.box{
position: relative;
}
.content{
position: absolute;
width: 100px;
height: 100px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
此方法利用margin: auto;
居中特性加決定定位上下左右為0來實現元素居中,此方法需要固定元素的寬高,並且決對定位於父元素。兼容ie8以上瀏覽器.
使用絕對定位absolute和css3的transform:translate屬性
<div class="box">
<div class="content">
這是要垂直居中的內容。
</div>
</div>
.box{
position: relative;
}
.content{
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
}
此方法利用了css3的新特性元素偏移屬性,先讓元素絕對定位於父元素的右、上的50%,然后通過transform:translate(-50%, -50%);
設置元素按照自身的右上便宜50%實現居中,此方法不用的優點:不用固定元素寬高,缺點:兼容需要支持css3的瀏覽器。
案例說明: https://codepen.io/qwguo88/full/jObmLaN
使用flex實現居中
通過flex彈性布局有好多種方式可以居中對齊,可以給父級單獨設置,或者父級子級結合設置實現
html代碼結構完全一樣:
<div class="box">
<div class="content">
這是要垂直居中的內容。
</div>
</div>
方法1:
.box{
display: flex;
justify-content: center;
align-items: center;
}
最簡單的方法,只通過父級設置,把父元素設置成彈性很模型,然后設置父元素的子元素橫向縱向居中顯示。
方法2:
.box{
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
也是只通過父級設置,把父元素設置成彈性很模型,然后設置父元素的子元素橫向居中顯示,然后通過彈性很模型的子元素組align-content:center
對齊方式,配合flex-wrap:wrap
實現。
方法3:
.box{
display: flex;
flex-direction: column;
align-items: center;
}
.box:before{
content: '';
flex-grow: .5;
}
這個也只只給父級設置,不同的是這個需要借助父級的偽元素;先把父元素設置成彈性很模型,然后設置縱向排列,然后設置橫軸左右居中,然后再借助父元素偽類,設置縱向占據父元素的.5大小,實現上下居中。
方法4:
.box{
display: flex;
}
.content{
margin: auto;
}
把父元素設置成彈性很模型,然后通過要居中的子元素設置margin:auto,元素外間距依照父級自適應外間距。
方法5:
.box{
display: flex;
justify-content: center;
}
.content{
align-self: content
}
把父元素設置成彈性很模型,然后子元素設置align-self: content。
查看案例: https://codepen.io/qwguo88/full/ZEbKgXG
使用grid網格布局實現居中
通過css的最新布局形式
grid
網格布局,也有多種方式,網格布局也可以給父級單獨設置,或者父級子級結合設置實現
html代碼結構完全一樣:
<div class="box">
<div class="content">
這是要垂直居中的內容。
</div>
</div>
方法1:
.box{
display: grid;
place-content: center;
}
方法2:
.box{
display: grid;
place-items: center;
}
方法3:
.box{
display: grid;
justify-content: center;
align-content: center;
}
方法4:
.box{
display: grid;
justify-content: center;
align-items: center;
}
方法5:
.box{
display: grid;
}
.content{
margin: auto;
}
方法6:
.box{
display: grid;
justify-content: center;
}
.content{
align-self: center;
}
查看案例: https://codepen.io/qwguo88/full/PoPmJbo
使用calc()計算函數實現
此方法需要固定高度
<div class="box">
<div class="content">
這是要垂直居中的內容。
</div>
</div>
.content{
margin: auto;
position: relative;
width: 300px;
height: 100px;
top: calc((100% - 100px)/ 2);
}
首先設置固定寬高,利用margin:auto
左右居中,然后通過relative
定位top
通過calc()
函數計算,使用父級的100% 減去元素自身高度然后除以2,也就是總高度減去元素高度計算后的一半值,如果元素設置了邊線和內邊距需要相應的減掉。
使用設置文字排布方向屬性writing-mode實現
<div class="box">
<div class="box-inner">
<div class="content">
這是要垂直居中的內容。
</div>
</div>
</div>
.box{
writing-mode: tb-lr;
writing-mode: vertical-lr;
text-align: center;
}
.box-inner{
width: 100%;
display: inline-block;
writing-mode: lr;
writing-mode: horizontal-tb;
}
.content{
display: inline-block;
text-align: left;
}
這個方法相對來說復雜一些,需要多加一個標簽,首先給最外層改變排布方向為垂直排布,然后設置垂直居中;然后在里邊一層再把排布方向設置回來,並且設置為行內塊級元素寬度100%;最后讓居中的元素設置成行內塊級元素,文字對齊設置成左對齊實現。