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

總結了幾種css居中實現的方式，注：*為常用方式，「wrap」為容器，「div」為要居中的元素。

*1.絕對定位，寬高都已知的情況下如下**可實現，或者可以使用negative margins；

.div

2.不知道元素的寬高，僅僅實現某個div是其父的1/2，水平垂直居中，隨著父元素的大小等比例放大或者縮小。

.div

*3.translate，寬度已知，高度未知的情況下

.wrap

4.table-cell，div本身高度未知，僅僅實現垂直居中的情況下，ps，此種情況div寬度是100%

.wrap

.div

*5.flex布局，寬度都不固定的情況下，只要在父容器中設定display:flex即可。

.wrap

6.hack方法，善於運用:after。

.wrap     

.wrap:after,  
.div     
.div:after     
.wrap

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.塊...

CSS水平垂直居中方法總結

部分html 如下 div class wrap block div class block center 塊兒居中 div div div class wrap inline span class inline center 內聯居中 span div 一 absolute 二 table inl...