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

資訊專欄INFORMATION COLUMN

實(shí)踐中的垂直居中

joy968 / 1121人閱讀

摘要：背景在項(xiàng)目中經(jīng)常碰到讓元素垂直居中的情形，實(shí)現(xiàn)的方法有很多，各有利弊。今天就利用下業(yè)余時(shí)間，匯總一下常用的幾種垂直居中的方式。

背景：在項(xiàng)目中經(jīng)常碰到讓元素垂直居中的情形，實(shí)現(xiàn)的方法有很多，各有利弊。眾所周知的，用flex布局很容易就實(shí)現(xiàn)，but，一些不是很主流的瀏覽器并不支持flex，這就比較尷尬了，有好東西不能在項(xiàng)目中用起來(lái)。今天就利用下業(yè)余時(shí)間，匯總一下常用的幾種垂直居中的方式。
廢話少說(shuō)，開(kāi)整。

如圖，如果想讓盒子A在盒子B內(nèi)垂直居中




  
A

flex方式，兼容到ie10

.box {
    display: -webkit-flex;  /* 新版本語(yǔ)法: chrome 21+ */
    display: flex;          /* 新版本語(yǔ)法: opera 12.1, firefox 22+ */         /*flex-direction: row; // 默認(rèn)水平排列 */
    align-items: center; /* 元素排列的垂直方向居中 */
}

利用ifc(行內(nèi)格式化上下文)，其實(shí)就是利用行高撐高父元素，視覺(jué)上表現(xiàn)也為垂直居中。

.box {
  line-height: 100px;
 }
.item {
  display: inline;
}

絕對(duì)相對(duì)定位

.box {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  margin-top: -10px; // 自身高度的一半，此用法需要知道自身的高度
  // transform: translateY(-50%); // 兼容性允許的話可以用css3特性代替margin-top
}
// 絕對(duì)定位另一種方式
.item {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  // left: 0; right: 0; // 這樣還能水平居中
}

利用vertical-align,為了不產(chǎn)生新的dom，可能使用偽類before做輔助，讓子元素與偽類垂直居中對(duì)齊

.box:before {
  content: "";
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}
.item {
  display: inline-block;
}

突然發(fā)現(xiàn)，實(shí)現(xiàn)垂直居中的方法有很多，此處先列舉幾個(gè)作參考，如有紕?wù)`，歡迎評(píng)論指正。如遇到具體情況不知道怎么實(shí)現(xiàn)的同學(xué)，也可以私信我，日后也繼續(xù)完善此貼。

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

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

相關(guān)文章

  • 實(shí)踐中的垂直居中

    摘要：背景在項(xiàng)目中經(jīng)常碰到讓元素垂直居中的情形，實(shí)現(xiàn)的方法有很多，各有利弊。今天就利用下業(yè)余時(shí)間，匯總一下常用的幾種垂直居中的方式。 背景：在項(xiàng)目中經(jīng)常碰到讓元素垂直居中的情形，實(shí)現(xiàn)的方法有很多，各有利弊。眾所周知的，用flex布局很容易就實(shí)現(xiàn)，but，一些不是很主流的瀏覽器并不支持flex，這就比較尷尬了，有好東西不能在項(xiàng)目中用起來(lái)。今天就利用下業(yè)余時(shí)間，匯總一下常用的幾種垂直居中的方式。...

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

  • css居中最佳實(shí)踐

    摘要：居中是非常常見(jiàn)的問(wèn)題，也是面試熱門，現(xiàn)在對(duì)居中問(wèn)題做個(gè)總結(jié)水平居中萬(wàn)能的居中給父元素添加子元素都會(huì)居中，無(wú)論是還是缺點(diǎn)屬性會(huì)繼承會(huì)影響后代元素配合缺點(diǎn)以下不兼容，不過(guò)低版本微軟自家都不支持了垂直居中單行居中與相等即可達(dá)到居中配 css居中是非常常見(jiàn)的問(wèn)題，也是面試熱門，現(xiàn)在對(duì)居中問(wèn)題做個(gè)總結(jié) 水平居中 萬(wàn)能的text-align居中 給父元素添加text-align:　center,子...

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

  • 《CSS世界》筆記三：內(nèi)聯(lián)元素與對(duì)齊

    摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁(yè)面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見(jiàn)和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫在前面 在頁(yè)面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見(jiàn)和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的1px，2px而頭疼不已...

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

  • 一篇文章了解移動(dòng)端文本垂直居中

    摘要：經(jīng)常我們?cè)跒g覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題最經(jīng)常遇見(jiàn)莫過(guò)于中文字稍微偏上了。為什么中文本偏上文本都會(huì)有一個(gè)內(nèi)容區(qū)域，這個(gè)區(qū)域就是我們選中文本時(shí)展示的區(qū)域。 在日常工作中，經(jīng)常會(huì)遇到圖片+文字+背景色的設(shè)計(jì)稿實(shí)現(xiàn)。經(jīng)常我們?cè)贑hrome瀏覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題——最經(jīng)常遇見(jiàn)莫過(guò)于Android中文字稍微偏上了。在iOS和An...

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

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

0條評(píng)論

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