摘要:兩個小栗子講完了,你明白了么文章末尾,再送兩個小栗子當(dāng)一個里沒有內(nèi)容時高度為,當(dāng)有內(nèi)容比如文字時,就有了高度,難道是文字把撐開了其實(shí)不是,這個高度是由元素的決定的。代碼很簡單使用布局也可以實(shí)現(xiàn)居中紅色框上下居中文字在紅色框中居中
之前學(xué)習(xí)垂直居中的時候在網(wǎng)上找了很多方法,看的我眼花撩亂,一直想著整理一下思路,透過那些紛繁的招式看到本質(zhì)。
首先明確一下概念:
left是指子元素的左margin距離父元素的左padding的距離
margin:auto是自適應(yīng)的意思,由瀏覽器自動計算
translatex:關(guān)于x軸的坐標(biāo)轉(zhuǎn)換,數(shù)值為百分?jǐn)?shù)時是相對于本身的寬高。
理解了以上三點(diǎn),就基本能看懂各種垂直居中方法了
1.top:0;bottom:0;left:0;right:0;margin:auto;這種方法的意思是先把子元素margin和父元素padding的距離置為0,可以理解為子元素和父元素之間沒有空隙,然后把margin置為auto,margin平分子元素和父元素之間的距離,也就是說子元素并不是真正意義的居中,只是子元素中間的內(nèi)容居中了,子元素和父元素之間的距離是計算機(jī)自動計算的(平分);注意這個方法需配合子元素position:absolute使用,因?yàn)槟J(rèn)情況下,margin:auto只對上下起作用,對左右不起作用,加上position使元素脫離標(biāo)準(zhǔn)流,margin:auto可識別
.father{ width:400px; height:400px; background-color:pink; position:relative; } .son{ width:100px; height:100px; background-color:red; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }2.transform:translate()
這種方法適用于不知道父元素寬高的情況下(面試官可能會這樣問呢)。這種方法是通過先把元素定位到父元素的百分之五十的位置top:50%;left:50%;看下圖:
注意此時子元素的左上角在父元素中間,整個子元素處于父元素右下四分之一的左上角,然后通過transform:translate(-50%,-50%),使子元素相對自身移動百分之五十,這樣子元素就居中啦。需要注意的是自元素中要寫定位position:relative;這樣才能根據(jù)父元素識別到定位的基點(diǎn)。
.father{ width:500px; height:500px; background-color:pink; /*position:relative;*/ } .son{ width:100px; height:100px; background-color: red; position:relative; top:50%; left:50%; transform:translate(-50%,-50%); }
兩個小栗子講完了,你明白了么?文章末尾,再送兩個小栗子(#^.^#)
3.line-height當(dāng)一個div里沒有內(nèi)容時高度為0,當(dāng)有內(nèi)容比如文字時,div就有了高度,難道是文字把div撐開了?其實(shí)不是,這個高度是由元素的line-height決定的。當(dāng)把line-height設(shè)置為該div的高度時,div中的文字就居中顯示了。代碼很簡單
qqqqq
.line{ width:100px; height:100px; line-height:100px; text-align:center; background:gray; }4、table
使用table布局也可以實(shí)現(xiàn)居中
qqqqqqqqqq
.father{ width:400px; height:200px; display:table-cell; text-align:center; vertical-align:middle; //紅色框上下居中 background-color:pink; } .son{ width:100px; height:100px; display:inline-block; background-color:red; line-height:100px; //文字在紅色框中居中 }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94643.html
摘要:兩個小栗子講完了,你明白了么文章末尾,再送兩個小栗子當(dāng)一個里沒有內(nèi)容時高度為,當(dāng)有內(nèi)容比如文字時,就有了高度,難道是文字把撐開了其實(shí)不是,這個高度是由元素的決定的。代碼很簡單使用布局也可以實(shí)現(xiàn)居中紅色框上下居中文字在紅色框中居中 之前學(xué)習(xí)垂直居中的時候在網(wǎng)上找了很多方法,看的我眼花撩亂,一直想著整理一下思路,透過那些紛繁的招式看到本質(zhì)。首先明確一下概念: left是指子元素的左mar...
摘要:兩個小栗子講完了,你明白了么文章末尾,再送兩個小栗子當(dāng)一個里沒有內(nèi)容時高度為,當(dāng)有內(nèi)容比如文字時,就有了高度,難道是文字把撐開了其實(shí)不是,這個高度是由元素的決定的。代碼很簡單使用布局也可以實(shí)現(xiàn)居中紅色框上下居中文字在紅色框中居中 之前學(xué)習(xí)垂直居中的時候在網(wǎng)上找了很多方法,看的我眼花撩亂,一直想著整理一下思路,透過那些紛繁的招式看到本質(zhì)。首先明確一下概念: left是指子元素的左mar...
摘要:方法二利用,設(shè)置元素結(jié)構(gòu),并應(yīng)用實(shí)現(xiàn)垂直居中,這種方法的實(shí)現(xiàn)可用于多行文本,要求及以上版本。 讓元素居中對齊是非常常見的需求,首先是水平居中,要實(shí)現(xiàn)水平居中行內(nèi)元素只需要在其父元素上設(shè)置text-align: center即可,對于塊級元素來說讓它的margin-left: auto和margin-right: auto即可(width不可為auto),那么垂直居中呢?找下css屬性發(fā)...
閱讀 2421·2021-11-25 09:43
閱讀 1202·2021-09-07 10:16
閱讀 2615·2021-08-20 09:38
閱讀 2942·2019-08-30 15:55
閱讀 1461·2019-08-30 13:21
閱讀 894·2019-08-29 15:37
閱讀 1446·2019-08-27 10:56
閱讀 2097·2019-08-26 13:45