国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

rozbo / 3270人閱讀

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

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

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


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

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

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

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

RapmvY

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

bpqPwN

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

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

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

MypMBE


塊級(jí)元素豎直居中

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

1. 塊級(jí)元素高度已知

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

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

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

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

KzWjbq

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

// 定義絕對(duì)定位實(shí)現(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);
}

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

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

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

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

bpqPyB

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

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

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

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

相關(guān)文章

  • 水平、垂直居中方式總結(jié)

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

    陸斌 評(píng)論0 收藏0

  • CSS居中那些事

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

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

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

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

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

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

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

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

  • css的結(jié)構(gòu)與布局

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

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

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

0條評(píng)論

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