摘要:基于特有的屬性擁有內(nèi)聯(lián)元素的特性同時(shí)可以定義寬高,我們可以設(shè)置一個(gè)行內(nèi)塊用于定義高度,再讓其他內(nèi)聯(lián)元素與其對(duì)齊,實(shí)現(xiàn)垂直居中。如果居中的元素超過(guò)了視窗會(huì)被裁剪掉。使用時(shí),不僅在水平方向上將元素居中,垂直方向上也是如此。
事實(shí)上,每次面試前端必問(wèn)的問(wèn)題就是這個(gè)。及其常見(jiàn)的需求,看起來(lái)似乎非常簡(jiǎn)單,但是實(shí)現(xiàn)起來(lái)很費(fèi)勁,尤其是涉及尺寸不固定的元素。
本篇文章將介紹比較流行的幾種方法。
行內(nèi)塊
hello
#ghost { display: inline-block; height: 20em; vertical-align: middle; }
本質(zhì)上是利用了內(nèi)聯(lián)元素的 vertical-align 屬性,通過(guò)將此屬性置為middle,同一行內(nèi)的內(nèi)聯(lián)元素都將以設(shè)置這一屬性的內(nèi)聯(lián)元素的基線對(duì)齊。
基于inline-block特有的屬性:擁有內(nèi)聯(lián)元素的特性同時(shí)可以定義寬高,我們可以設(shè)置一個(gè)ghost行內(nèi)塊用于定義高度,再讓其他內(nèi)聯(lián)元素與其對(duì)齊,實(shí)現(xiàn)垂直居中。
當(dāng)然我們也可以將其它元素置為行內(nèi)塊,再設(shè)置寬度并添加text-align使其水平居中。
總結(jié)一下,此方法太過(guò)hack。
絕對(duì)定位 子元素固定寬高hello
#main { background-color: green; height: 20em; width: 20em; position: relative; } #child { position: absolute; background: yellow; top: 50%; left: 50%; height: 10em; width: 10em; margin-top: -5em; margin-left: -5em; }
顯然,這種方法的原理是:先利用絕對(duì)定位將這個(gè)元素的左上角放置與父元素的正中間,再利用負(fù)邊距將它向左上移動(dòng)它本身的一半。
如果借助calc()函數(shù)可以說(shuō)明得更加清楚:
#child { position: absolute; top: calc(50%-5em); left: calc(50%-5em); height: 10em; width: 10em; }不固定寬高
實(shí)際中大多數(shù)時(shí)候我們并不知道子元素的實(shí)際寬高。
如果你屬性translate()函數(shù),你一定知道當(dāng)它的參數(shù)為百分比時(shí),它會(huì)按照元素本身的百分比值進(jìn)行變換,我們可以通過(guò)這個(gè)方法徹底擺脫對(duì)尺寸的依賴!
#child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
看起來(lái)已經(jīng)完美解決了,但是它還有以下的缺陷:
絕對(duì)定位會(huì)對(duì)整體的布局造成很強(qiáng)烈的影響。
如果居中的元素超過(guò)了視窗會(huì)被裁剪掉。
在某些瀏覽器中,元素可能會(huì)被放置在半個(gè)像素上造成模糊。
視口居中如果我們不采用絕對(duì)定位,對(duì)子元素設(shè)置margin使其左上角置于父元素中點(diǎn),再用translate重復(fù)上一種方法的操作,是否可以實(shí)現(xiàn)呢?
答案是不可以,因?yàn)閙argin的百分比是以父元素的寬度為基準(zhǔn)的,即便是top和bottom也是! 沒(méi)錯(cuò),很扯。
如果僅僅想要垂直于視口,我們可以采用css中相對(duì)于視口的單位 vw、vh、vmin、vmax
1vw 表示視口寬度的1%,同理1vh等于視口高度的1%
當(dāng)視口寬度小于高度時(shí),1vmin=1vw,否則1vmin=1vh,另一種情況同理。
#child { margin:50vh auto 0; transform: translateY(-50%); }
它只能基于視口居中。
Flexboxflex當(dāng)然是未來(lái)的趨勢(shì),上面的一切都可以理解成為了照顧老舊的瀏覽器的猴戲(雖然translate和視口單位的兼容性也不怎么好)。
hello
#main { margin: auto; } body { display: flex; }
啊,很難受。使用flexbox時(shí),margin:auto不僅在水平方向上將元素居中,垂直方向上也是如此。
如果你熟悉flex的話,其實(shí)還有多種實(shí)現(xiàn)方式。
body { display: flex; justify-content: center; align-items:center; }
或者對(duì)子元素多帶帶設(shè)置交叉軸對(duì)齊方式:
body { display: flex; justify-content: center; } #main { align-self:center; }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/115859.html
摘要:基于特有的屬性擁有內(nèi)聯(lián)元素的特性同時(shí)可以定義寬高,我們可以設(shè)置一個(gè)行內(nèi)塊用于定義高度,再讓其他內(nèi)聯(lián)元素與其對(duì)齊,實(shí)現(xiàn)垂直居中。如果居中的元素超過(guò)了視窗會(huì)被裁剪掉。使用時(shí),不僅在水平方向上將元素居中,垂直方向上也是如此。 事實(shí)上,每次面試前端必問(wèn)的問(wèn)題就是這個(gè)。及其常見(jiàn)的需求,看起來(lái)似乎非常簡(jiǎn)單,但是實(shí)現(xiàn)起來(lái)很費(fèi)勁,尤其是涉及尺寸不固定的元素。 本篇文章將介紹比較流行的幾種方法。 行內(nèi)塊...
摘要:居中分為水平居中和垂直居中,水平居中方式也較為常見(jiàn)和統(tǒng)一,垂直居中的方法就千奇百怪了。若把最后一行加上,即可同時(shí)實(shí)現(xiàn)水平和垂直居中。 博客原文地址:Claiyre的個(gè)人博客 https://claiyre.github.io/如需轉(zhuǎn)載,請(qǐng)?jiān)谖恼麻_(kāi)頭注明原文地址不為繁華易匠心 從css入門(mén)就開(kāi)始接觸,無(wú)所不在的,一直備受爭(zhēng)議的居中問(wèn)題。css居中分為水平居中和垂直居中,水平居中方式也較為...
摘要:擁有較高的性能,代碼邏輯非常簡(jiǎn)單,越來(lái)越多的人已開(kāi)始關(guān)注和使用它注意上面的例子中必須為元素設(shè)置寬度,并且寬度必須小于父容器的寬度絕對(duì)定位實(shí)現(xiàn)垂直居中或者自身高度的一半 水平居中 行內(nèi)或類(lèi)行內(nèi)元素水平居中 在塊級(jí)父容器中設(shè)置text-align:center 塊級(jí)元素水平居中 塊級(jí)元素設(shè)置margin-left和margin-right為auto(前提是已經(jīng)為元素設(shè)置了width) fl...
閱讀 2511·2021-11-15 11:36
閱讀 1257·2019-08-30 15:56
閱讀 2311·2019-08-30 15:53
閱讀 1100·2019-08-30 15:44
閱讀 712·2019-08-30 14:13
閱讀 1050·2019-08-30 10:58
閱讀 539·2019-08-29 15:35
閱讀 1364·2019-08-29 13:58