實用專題OICQ專區 MSN專區 主頁瀏覽 影音播放 系統優化 辦公專區 殺軟專區 木馬防范 流氓清除 黑軟專區 設計專區 壓縮解壓 下載工具 P2P工具專區 輸入法專區

您當前的位置:JZ5U綠色下載站文章中心編程開發編程語言 → 文章內容
  • 史上最全-CSS實現水平垂直居中方式

這是一道面試必考題,很多面試官都喜歡問這個問題

史上最全 - CSS完成程度垂直居中方式

要完成上圖的效果看似很簡單,實則隱藏玄機,下面總結了一下CSS完成程度垂直居中的方式大約有下面這些,come

僅居中元素定寬高適用

absolute + 負margin

absolute + margin auto

absolute + calc

居中元素不定寬高

absolute + transform

lineheight

writing-mode

table

css-table

flex

grid

absolute + 負margin

為了完成上面的效果先來做些準備工作,假定HTML代碼如下,總共兩個元素,父元素和子元素

123123

wp是父元素的類名,box是子元素的類名,由于有定寬和不定寬的區別,size用來表示指定寬度,下面是一切效果都要用到的公共代碼,主要是設置顏色和寬高

留意:后面不在反復這段公共代碼,只會給出相應提示

/* 公共代碼 */

.wp {

 border: 1px solid red;

 width: 300px;

 height: 300px;

}

.box {

 background: green;

}

.box.size{

 width: 100px;

 height: 100px;

}

/* 公共代碼 */

絕對定位的百分比是相關于父元素的寬高,經過這個特性能夠讓子元素的居中顯現,但絕對定位是基于子元素的左上角,希冀的效果是子元素的中心居中顯現

為了修正這個問題,能夠借助外邊距的負值,負的外邊距能夠讓元素向相反方向定位,經過指定子元素的外邊距為子元素寬度一半的負值,就能夠讓子元素居中了,css代碼如下

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 position: relative;

}

.box {

 position: absolute;;

 top: 50%;

 left: 50%;

 margin-left: -50px;

 margin-top: -50px;

}

這是我比擬常用的方式,這種方式比擬好了解,兼容性也很好,缺陷是需求曉得子元素的寬高

absolute + margin auto

這種方式也請求居中元素的寬高必需固定,HTML代碼如下

123123

這種方式經過設置各個方向的間隔都是0,此時再講margin設為auto,就能夠在各個方向上居中了

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 position: relative;

}

.box {

 position: absolute;;

 top: 0;

 left: 0;

 right: 0;

 bottom: 0;

 margin: auto;

}

這種辦法兼容性也很好,缺陷是需求曉得子元素的寬高

absolute + calc

這種方式也請求居中元素的寬高必需固定,所以我們為box增加size類,HTML代碼如下

123123

感激css3帶來了計算屬性,既然top的百分比是基于元素的左上角,那么在減去寬度的一半就好了,代碼如下

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 position: relative;

}

.box {

 position: absolute;;

 top: calc(50% - 50px);

 left: calc(50% - 50px);

}

這種辦法兼容性依賴calc的兼容性,缺陷是需求曉得子元素的寬高

absolute + transform

還是絕對定位,但這個辦法不需求子元素固定寬高,所以不再需求size類了,HTML代碼如下

123123

修復絕對定位的問題,還能夠運用css3新增的transform,transform的translate屬性也能夠設置百分比,其是相關于本身的寬和高,所以能夠講translate設置為-50%,就能夠做到居中了,代碼如下

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 position: relative;

}

.box {

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%, -50%);

}

這種辦法兼容性依賴translate2d的兼容性

lineheight

應用行內元素居中屬性也能夠做到程度垂直居中,HTML代碼如下

123123

把box設置為行內元素,經過text-align就能夠做到程度居中,但很多同窗可能不曉得經過經過vertical-align也能夠在垂直方向做到居中,代碼如下

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 line-height: 300px;

 text-align: center;

 font-size: 0px;

}

.box {

 font-size: 16px;

 display: inline-block;

 vertical-align: middle;

 line-height: initial;

 text-align: left; /* 修正文字 */

}

這種辦法需求在子元素中將文字顯現重置為想要的效果

writing-mode

很多同窗一定和我一樣不曉得writing-mode屬性,感激@張鑫旭教師的反應,簡單來說writing-mode能夠改動文字的顯現方向,比方能夠經過writing-mode讓文字的顯現變為垂直方向

程度方向

垂直方向

.div2 {

 writing-mode: vertical-lr;

}

顯現效果如下:

程度方向

更神奇的是一切程度方向上的css屬性,都會變為垂直方向上的屬性,比方text-align,經過writing-mode和text-align就能夠做到程度和垂直方向的居中了,只不過要略微費事一點

123123

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 writing-mode: vertical-lr;

 text-align: center;

}

.wp-inner {

 writing-mode: horizontal-tb;

 display: inline-block;

 text-align: center;

 width: 100%;

}

.box {

 display: inline-block;

 margin: auto;

 text-align: left;

}

這種辦法完成起來和了解起來都略微有些復雜

table

曾經table被用來做頁面規劃,如今沒人這么做了,但table也可以完成程度垂直居中,但是會增加很多冗余代碼

123123

tabel單元格中的內容自然就是垂直居中的,只需添加一個程度居中屬性就好了

.wp{

 text-align:center;

}

.box{

 display:inline-block;

}

這種辦法就是代碼太冗余,而且也不是table的正確用法

css-table

css新增的table屬性,能夠讓我們把普通元素,變為table元素的理想效果,經過這個特性也能夠完成程度垂直居中

123123

下面經過css屬性,能夠讓div顯現的和table一樣

.wp{

 display:table-cell;

 text-align:center;

 vertical-align:middle;

}

.box{

 display:inline-block;

}

這種辦法和table一樣的原理,但卻沒有那么多冗余代碼,兼容性也還不錯

flex

flex作為現代的規劃計劃,推翻了過去的經歷,只需幾行代碼就能夠文雅的做到程度垂直居中

123123

.wp{

 display:flex;

 justify-content:center;

 align-items:center;

}

目前在挪動端曾經完整能夠運用flex了,PC端需求看本人業務的兼容性狀況

grid

css新出的網格規劃,由于兼容性不太好,不斷沒太關注,經過grid也能夠完成程度垂直居中

123123

.wp{

 display:grid;

}

.box{

 align-self:center;

 justify-self:center;

}

代碼量也很少,但兼容性不如flex,不引薦運用

總結

下面比照下各個方式的優缺陷,肯定又雙叒叕該有同窗說回字的寫法了,簡單總結下

PC端有兼容性請求,寬高固定,引薦absolute + 負margin

PC端有兼容請求,寬高不固定,引薦css-table

PC端無兼容性請求,引薦flex

挪動端引薦運用flex

史上最全 - CSS完成程度垂直居中方式

最近發現很多同窗都對css不夠注重,這其實是不正確的,比方下面的這么簡單的問題都有那么多同窗不會,我也是很無語

123

123

.red{

 color:red

}

.blue{

 color:blue

}

問兩個div的顏色分別是什么,居然只要40%的同窗可以答對,這40%中還有很多同窗不曉得為什么,希望這些同窗好好補習下CSS根底


  • 作者:佚名  來源:本站整理  發布時間:2019/10/23 14:41:14

----------------------------------The End Of Jz5u' Article---------------------------------- 以下是評論:【發表評論

------------------------------- · 相關文檔瀏覽 · --------------------------------------------------------------------- · 熱門文檔瀏覽 · -------------------------------------

后三组六是什么意思