Css的幾種實現水平垂直居中方式

2021-10-19 04:09:42 字數 963 閱讀 5479

1.居中元素定寬高（其中畫素都代表居中元素高度的一半）

absolute + 負margin

.parent


.children
absolute + margin auto

.children
absolute + calc

.children
2.居中元素不定寬高

absolute + transfrom

.children
line-height（把children設為行內元素，通過text-align就可以做到水平居中，使用vertical-align也可以在垂直方向做到居中。）

.parent


.children
writing-mode（writing-mode可以改變文字的顯示方向，比如可以改變writing-mode讓文字的顯示變為垂直方向。）

.parent


.parent-inner


.children
css-table

.parent


.children
flex

.parent
grid（css新出的網格布局）

.parent


.children

css的幾種垂直水平居中方法

總結了幾種css居中實現的方式，注 為常用方式，wrap 為容器，div 為要居中的元素。1.絕對定位，寬高都已知的情況下如下 可實現，或者可以使用negative margins div 2.不知道元素的寬高，僅僅實現某個div是其父的1 2，水平垂直居中，隨著父元素的大小等比例放大或者縮小。di...

CSS垂直居中水平居中方法

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

css垂直水平居中方法

1.塊級元素中的行內元素水平居中 給塊級元素設定 text align center 2.塊級元素1中的塊級元素2水平居中 1 給塊級元素2設定 margin 0 auto 2 給塊級元素2設定 display inline block 給塊級元素1中設定 text align center 1.塊...