實踐中的垂直居中

dongfangyiyu 發(fā)布于2019-08-30 14:01 / 2773人閱讀

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

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

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

flex方式，兼容到ie10

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

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

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

絕對相對定位

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

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

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

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

云服務器 GPU云服務器垂直居中實現(xiàn)垂直居中水平垂直居中文字垂直居中

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115709.html

實踐中的垂直居中

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

joy968 2019-08-01 18:38 評論0 收藏0
css居中最佳實踐

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

BlackFlagBin 2019-08-29 11:02 評論0 收藏0
《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊

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

HtmlCssJs 2019-08-29 16:19 評論0 收藏0
一篇文章了解移動端文本垂直居中

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

sutaking 2019-08-23 13:50 評論0 收藏0