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

資訊專欄INFORMATION COLUMN

css 實現(xiàn)豎直居中的 N 種場景及 N 種方法

rozbo / 3287人閱讀

摘要：塊級元素豎直居中通常借助絕對定位和等手段，在已知或者未知塊級元素高度時，分別使用不同的方法。

剛開始工作的時候，css 里的豎直居中一直是個老大難問題。每次用到的時候都去網(wǎng)上搜，搜，搜，半天才搜到合適的解決方法。然后下次遇到，呃，又忘了~

后來仔細回憶了一下，其實CSS實現(xiàn)豎直居中是有幾種不同的應用場景的，需要分別使用不同的解決方法。這也是為啥每次都覺得，誒上次那個解決方法好像不行呢？（原來并不是我智商的問題）好了廢話不多說，記錄下遇到的不同場景及解決方法，希望能對自己或者別人有所幫助。


inline 或者 inline-* 的元素豎直居中

可以借助 padding, line-height, vertical-align 等屬性。有如下兩種具體情景：

1. 單行豎直居中，如單行文本或者鏈接

這種情況，通過給元素上下添加相同大小的 padding 值即可實現(xiàn)豎直居中。

RapmvY

如果本姑娘就不想使用 padding 不方便使用 padding 時，可以通過給元素設置 line-height，使其等于父容器的高度，從而實現(xiàn)豎直居中。==注意，此時記得要考慮父容器的 padding 和 border 帶來的高度變化。==

bpqPwN

2. 多行豎直居中，如多行文本

和單行文本一樣，給元素上下添加相同大小的 padding 值，還是好用滴~
ONpeEV

另外一種方法，是借助 table 的屬性：將父容器設置成 table，需要豎直居中的元素設置為 table-cell，然后就可以使用 vertical-align 屬性來居中了。

MypMBE


塊級元素豎直居中

通常借助 絕對定位 和 translate 等手段，在已知或者未知塊級元素高度時，分別使用不同的方法。

1. 塊級元素高度已知

此時可以使用絕對定位的方法，并借助 margin 可以為負值的特性，實現(xiàn)絕對定位居中：

/* 已知元素高度為 100px (也可以是百分比，如 80%)*/
height: 100px;

/* 先使用絕對定位，將元素的上邊界置于豎直的中間*/
position: absolute;
top: 50%;

/* 再使用margin-top，將元素向上移動自身高度的一半*/
margin-top: -50px;

KzWjbq

筆者表示類似這段代碼的使用頻率簡直不要太高~ 于是在使用 scss 的前提下，自己封裝了一個 mixin，專門用來實現(xiàn)這種定位方式。

// 定義絕對定位實現(xiàn)水平、垂直居中
@mixin abs_h_center($width) {
  position: absolute;
  width: $width;
  left: 50%;
  margin-left: -($width/2);
}
@mixin abs_v_center($height) {
  position: absolute;
  height: $height;
  top: 50%;
  margin-top: -($height/2);
}

// 然后使用的時候直接引用就可以了，這樣可以避免在改動元素寬或高時，還需要同時去改 margin-left 或者 margin-top 的值
.content {
  @include abs_v_center(200px);
}
2. 塊級元素高度不固定

與上面提到的使用絕對定位居中的方法原理類似，只不過在元素高度不確定的情況下，借助 translateY 使元素向上移動自身高度的一半，進而實現(xiàn)豎直居中。

/* 先將元素的上邊界置于豎直的中間*/
position: relative;
top: 50%;

/* 再使用 translateY，將元素向上移動自身高度的一半*/
transform: translateY(-50%);

bpqPyB

目前想到的就這些，應該足夠覆蓋大部分的使用情況了~ 以上這些實現(xiàn)方法，當然也可以是混合使用的，具體如何，就看應用場景啦。

另外，以后再遇到別的豎直居中的實現(xiàn)方法，也會更新到這里。

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

轉載請注明本文地址：http://systransis.cn/yun/111651.html

相關文章

  • 水平、垂直居中方式總結

    摘要：我們在實際工作中經(jīng)常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設置水平居中和垂直居中。水平居中行內(nèi)元素。不定寬塊狀元素水平居中我們來學習一下這種方法。 我們在實際工作中經(jīng)常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設置水平居中和垂直居中。 水平居中 行內(nèi)元素。 如果被設置元素為文本、圖片等行內(nèi)元素時，水平居中是通過給父元素設置text-align:c...

    陸斌 評論0 收藏0

  • CSS居中那些事

    摘要：定寬塊狀元素滿足定寬和塊狀兩個條件的元素是可以通過設置左右值為來實現(xiàn)居中的。設置方法改變塊級元素的為類型設置為行內(nèi)元素顯示，然后使用來實現(xiàn)居中效果。 做前端這一年多來，其實一直都是偏向于js前后端，css什么的總是抱著夠用就好的心態(tài)，從來沒有系統(tǒng)的學習或總結過，結果現(xiàn)在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，于是簡單的總結一下，高手繞路。...

    dingding199389 評論0 收藏0

  • CSS實現(xiàn)元素垂直居中

    摘要：實現(xiàn)元素垂直居中對元素的垂直居中針對于單行元素和多行元素將分情況討論。三父元素高度確定的多行文本多行文本，圖片，塊級元素皆屬于這種情況，對此的垂直居中主要有兩種方法。插入對要垂直居中的元素外插入包括標簽，同時設置。 CSS實現(xiàn)元素垂直居中 對元素的垂直居中針對于單行元素和多行元素將分情況討論。 一、父元素高度確定的單行文本 父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 h...

    RobinTang 評論0 收藏0

  • CSS實現(xiàn)元素垂直居中

    摘要：實現(xiàn)元素垂直居中對元素的垂直居中針對于單行元素和多行元素將分情況討論。三父元素高度確定的多行文本多行文本，圖片，塊級元素皆屬于這種情況，對此的垂直居中主要有兩種方法。插入對要垂直居中的元素外插入包括標簽，同時設置。 CSS實現(xiàn)元素垂直居中 對元素的垂直居中針對于單行元素和多行元素將分情況討論。 一、父元素高度確定的單行文本 父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 h...

    joywek 評論0 收藏0

  • css的結構與布局

    摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當視口寬度小于高度時，等于，否則等于。基于的方法這種應該算是最佳的解決辦法實現(xiàn)方法當使用布局時，使用在水平和垂直方向都會居中。 1.自適應內(nèi)部元素 在css中，不給元素一個height值時，元素會自適應其內(nèi)部的元素高度，有時我們想讓元素的寬度也達到此效果，應用場景如下。 如下當前的這種布局，想要改成最外層的div的寬度由當前的圖片撐開的...

    GeekQiaQia 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<