水平且垂直居中方法（10種）

2021-09-14 02:31:39 字數 1529 閱讀 9121

水平且垂直居中方法有哪些？這在實際工作中經常用到，小記一下。

i
一般的，水平居中相對垂直居中簡單很多，對於內聯元素（inline、inline-block、inline-table和inline-flex），父級元素設定text-align: center;；對於塊級元素，子級元素設定margin: 0 auto;。以下結合水平居中強調實現垂直居中。

#div1 


#div2
注：需要已知父級元素固定寬高，才能確定margin-left和margin-right。

#div1 


#div2
注：需要已知父級元素的固定高度，才可以確定line-height。

#div1 


#div2
注：無需要確定父級元素的寬高，inline-block、table-cell不相容ie67

看到還有一種方案，是借助偽元素::after將容器撐高，實現內聯元素垂直居中

#div1 


#div1::after 


#div2
缺點：較難以理解，只適用於乙個子級內聯元素（有多個子元素不適用）

#div1 


#div2
注：無需要確定父級元素的寬高，table-cell不相容ie67

#div1 


#div2
注：無需要確定父級元素的寬高，translate屬性相容ie9+

#div1 


#div2 


#div3
注：無需要確定父級元素的寬高，但html標籤層數較多。

#div1 


#div2
注：無需要確定父級元素的寬高，但把定位屬性全用上了

#div1 


#div2
注：無需要確定父級元素的寬高，相容ie10+

#div1 


#div2
注：無需要確定父級元素的寬高，相容性firefox 52, safari 10.1, chrome 57, opera 44

#div1 


#div2
注：此方法最簡潔， 但是 flex/grid 存在相容性問題

10種CSS水平垂直居中方法

編寫該博文僅僅作為梳理，鞏固學習，加強記憶。場景一 居中元素寬高已知 absolute 負 margin absolute margin auto absolute calc 場景二 居中元素寬高未知absolute transform line height writing mode table ...

16種水平居中垂直居中方法

1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 float left 屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下...

CSS垂直居中水平居中方法

center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...