成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

白淺教你CSS的垂直居中方法

zengdongbao / 893人閱讀 

placeholder: 我是一個(gè)不正經(jīng)的屬性.
                                                                          ----題記

???????說道頁面垂直居中, 在大家的思維中, 很快就能有若干個(gè)(常用/用過)解決方法, 但是在很多面試題中, 都會(huì)出現(xiàn)這么一個(gè)題, 寫出多個(gè)垂直居中的方法, (其實(shí)掌握比較通用的, 兼容性好的方法就行了, 其他的就當(dāng)看著玩, 有遺漏的歡迎補(bǔ)充 ps: 最好私信我給我留點(diǎn)面子 /壞笑). 那么下面就介紹幾種垂直居中的方法:

默認(rèn)的樣式

??????首先我先有一些默認(rèn)的樣式(都是一些比較常規(guī)的樣式表, 一看就懂, 對(duì)本文核心影響不大).

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.ex{
  width:100% ;
  height: 100px;
  background: #eee;
  text-align: center;
  margin: 10px 0;
}
.ex_1{
  background-color: lightgreen;
}
/* 本來想用多個(gè), 后來考慮沒什么用, 就留下了一個(gè)子元素 */

.ex > div{
  margin: 0 auto;
  width: 100px;
  height: 30px;
  line-height: 30px;
}
方法一 
父元素設(shè)置{ display: flex; align-items: center; }

原理是運(yùn)用了flex布局, 同時(shí)使用css3的屬性align-items, 兼容性較差.

展示效果:

方法二 
父元素設(shè)置{ display: flex; } 子元素設(shè)置{ align-self: center; }

與方法一相同, 只是垂直居中的屬性添加到了子元素當(dāng)中(調(diào)皮的由item換成了一個(gè)self).

展示效果:

方法三

如果在一段塊元素包裹的行內(nèi)元素中有某個(gè)元素比較特殊, 比如: 大寫加粗的文字 、 亂入的圖片圖標(biāo), 垂直居中:

該元素設(shè)置 { vertical-align: middle; }
/* 同時(shí)對(duì)應(yīng) text-bottom/text-top 為下對(duì)齊/上對(duì)齊 */

兼容性:

//xxx(請(qǐng)?jiān)徫也幌胩崴拿?, 竟然支持到了4.0 驚艷到我了

展示效果:

方法四 
父元素相對(duì)定位(或其他定位){ position: relative; }
子元素絕對(duì)定位{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto }

關(guān)鍵點(diǎn)在于: margin: auto
兼容性方面, 我稍有疑問,
top為例:

而position:

那么請(qǐng)問: 5.0~6.9999999之間top等元素做了什么?(歡迎大(lao)神(niao)解答 /壞笑)

展示效果:

方法五 
父元素設(shè)置{ padding: xxpx; height: auto !important;/*替換了我的默認(rèn)樣式*/ }

當(dāng)有高度不固定的內(nèi)容時(shí).

兼容性:

展示效果:

方法六 
    line-height/height設(shè)置為等值

適用于子元素為內(nèi)聯(lián)元素或文字的塊元素.

兼容性:

展示效果:

方法七 
父元素設(shè)置{ display: table-cell; vertical-align: middle; }
/* 缺點(diǎn)元素寬度不能設(shè)置為百分比, 可以為固定像素值 */

兼容性:

展示效果:

方法八 
父元素設(shè)置{ position: relative; }
中間元素{ position: absolute; top: 50%; left: 50%; }
子元素{ position: relative; top: -50%; left: -50% }

原理是, 中間元素左上角, 位于父元素中心點(diǎn), 子元素相對(duì)中間元素top/left位移-50%, 使子元素中心與中間元素左上角重合, 同時(shí)與父元素中心重合( 垂直/水平居中 ).

兼容性:(同方法四)

展示效果:

方法九 
父元素設(shè)置{ display: box; box-pack: center; box-align: center; }

其中box-pack為x軸, box-align為y軸.

兼容性(完(pou)美(gai)):

目前主流瀏覽器都不支持box-pack屬性。
Internet Explorer 10 使用 -ms-flex-pack property 屬性來代替支持。
Firefox通過私有屬性- MOZ-box-pack支持。
Safari, Opera, 和 Chrome 通過私有屬性 -webkit-box-pack 支持.
注意： Internet Explorer 9及更早IE版本不支持彈性框.

展示效果:

方法十 
父元素設(shè)置{ position: relative; }
子元素設(shè)置{ position: absolute; top: 50%; left: 50%; transform: translate: (-50%, 50%) }

與方法八有異曲同工之妙, 但是是運(yùn)用了css3的屬性 transform.
兼容性:

展示效果:

可能還會(huì)有其他方法, 歡迎補(bǔ)充.

出發(fā)點(diǎn):
想起來一次面試的時(shí)候, 第一題貌似就是這個(gè),
好像見過很多次, 如果你能列出來5種, 8種, 10種甚至更多, 面試官會(huì)不會(huì)嚇?biāo)?
希望試過的同學(xué)記得告訴我結(jié)果... ( 純屬扯淡, 如有雷同, 就是事實(shí). )

聲明: 點(diǎn)下推薦不會(huì)懷孕.

以上.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116469.html

相關(guān)文章

  • [譯]148個(gè)資源讓你成為CSS專家

    摘要：層疊樣式表二修訂版這是對(duì)作出的官方說明。速查表兩份表來自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來自的基礎(chǔ)參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個(gè)方法快速寫成高質(zhì)量的寫出高效的一些提示。 迄今為止，我已經(jīng)收集了100多個(gè)精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...

    impig33 評(píng)論0 收藏0

  • CSS居中完全指南——構(gòu)建CSS居中決策樹

    摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

    cc17 評(píng)論0 收藏0

  • CSS居中完全指南——構(gòu)建CSS居中決策樹

    摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

    AlienZHOU 評(píng)論0 收藏0

  • CSS垂直居中的七個(gè)方法

    摘要：下面的會(huì)造成這種樣子的垂直居中因此，如果有一個(gè)方塊變成了高度，那么其他的方塊就會(huì)真正的垂直居中。使用使用或的屬性，輕輕松松就可以做到垂直居中的效果。 我們?cè)诰庉嬕粋€(gè)版面，通常都會(huì)用到水平居中和垂直居中來設(shè)計(jì)，而水平居中很好處理，不外乎就是設(shè)定margin:0 auto；或是text-align:center；，就可以輕松解決掉水平居中的問題，但一直以來最麻煩對(duì)齊問題，都是垂直居中這個(gè)討...

    mingzhong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<