CSS實現水平垂直居中的N種方法

2021-08-28 04:07:12 字數 3278 閱讀 8819

劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題。

要實現上圖的效果看似很簡單，實則暗藏玄機，本文總結了一下css實現水平垂直居中的方式大概有下面這些

僅居中元素定寬高適用

居中元素不定寬高

為了實現上面的效果先來做些準備工作，假設html**如下，總共兩個元素，父元素和子元素

123123
wp是父元素的類名，box是子元素的類名，因為有定寬和不定寬的區別，size用來表示指定寬度，下面是所有效果都要用到的公共**，主要是設定顏色和寬高

注意：後面不在重複這段公共**，只會給出相應提示

/* 公共** */


.wp 


.box 


.box.size


/* 公共** */
絕對定位的百分比是相對于父元素的寬高，通過這個特性可以讓子元素的居中顯示，但絕對定位是基於子元素的左上角，期望的效果是子元素的中心居中顯示

為了修正這個問題，可以借助外邊距的負值，負的外邊距可以讓元素向相反方向定位，通過指定子元素的外邊距為子元素寬度一半的負值，就可以讓子元素居中了，css**如下

/* 此處引用上面的公共** */


/* 此處引用上面的公共** */


/* 定位** */


.wp 


.box
這是我比較常用的方式，這種方式比較好理解，相容性也很好，缺點是需要知道子元素的寬高

這種方式也要求居中元素的寬高必須固定，html**如下

123123
這種方式通過設定各個方向的距離都是0，此時再講margin設為auto，就可以在各個方向上居中了

/* 此處引用上面的公共** */


/* 此處引用上面的公共** */


/* 定位** */


.wp 


.box
這種方法相容性也很好，缺點是需要知道子元素的寬高

這種方式也要求居中元素的寬高必須固定，所以我們為box增加size類，html**如下

123123
感謝css3帶來了計算屬性，既然top的百分比是基於元素的左上角，那麼在減去寬度的一半就好了，**如下

/* 此處引用上面的公共** */


/* 此處引用上面的公共** */


/* 定位** */


.wp 


.box
這種方法相容性依賴calc的相容性，缺點是需要知道子元素的寬高

還是絕對定位，但這個方法不需要子元素固定寬高，所以不再需要size類了，html**如下

123123
修復絕對定位的問題，還可以使用css3新增的transform，transform的translate屬性也可以設定百分比，其是相對於自身的寬和高，所以可以講translate設定為-50%，就可以做到居中了，**如下

/* 此處引用上面的公共** */


/* 此處引用上面的公共** */


/* 定位** */


.wp 


.box
這種方法相容性依賴translate2d的相容性

利用行內元素居中屬性也可以做到水平垂直居中，html**如下

123123
把box設定為行內元素，通過text-align就可以做到水平居中，但很多同學可能不知道通過通過vertical-align也可以在垂直方向做到居中，**如下

/* 此處引用上面的公共** */


/* 此處引用上面的公共** */


/* 定位** */


.wp 


.box
這種方法需要在子元素中將文字顯示重置為想要的效果

很多同學一定和我一樣不知道writing-mode屬性，簡單來說writing-mode可以改變文字的顯示方向，比如可以通過writing-mode讓文字的顯示變為垂直方向

水平方向


垂直方向


.div2
更神奇的是所有水平方向上的css屬性，都會變為垂直方向上的屬性，比如text-align，通過writing-mode和text-align就可以做到水平和垂直方向的居中了，只不過要稍微麻煩一點

123123


/* 此處引用上面的公共** */


/* 此處引用上面的公共** */


/* 定位** */


.wp 


.wp-inner 


.box
曾經table被用來做頁面布局，現在沒人這麼做了，但table也能夠實現水平垂直居中，但是會增加很多冗餘**

123123
tabel單元格中的內容天然就是垂直居中的，只要新增乙個水平居中屬性就好了

.wp 


.box
這種方法就是**太冗餘，而且也不是table的正確用法

css新增的table屬性，可以讓我們把普通元素，變為table元素的現實效果，通過這個特性也可以實現水平垂直居中

123123
下面通過css屬性，可以讓div顯示的和table一樣

.wp 


.box
flex作為現代的布局方案，顛覆了過去的經驗，只需幾行**就可以優雅的做到水平垂直居中

123123


.wp
目前在移動端已經完全可以使用flex了，pc端需要看自己業務的相容性情況

css新出的網格布局，由於相容性不太好，一直沒太關注，通過grid也可以實現水平垂直居中

123123


.wp 


.box

css實現水平居中 垂直居中 垂直水平居中布局

1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...

css水平居中 垂直居中 水平垂直居中

css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...