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

資訊專欄INFORMATION COLUMN

CSS水平居中和垂直居中的若干方法

hiyayiji / 2851人閱讀

摘要：居中分為水平居中和垂直居中，水平居中方式也較為常見(jiàn)和統(tǒng)一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同時(shí)實(shí)現(xiàn)水平和垂直居中。

博客原文地址：Claiyre的個(gè)人博客 https://claiyre.github.io/
如需轉(zhuǎn)載，請(qǐng)?jiān)谖恼麻_(kāi)頭注明原文地址
不為繁華易匠心

從css入門就開(kāi)始接觸，無(wú)所不在的，一直備受爭(zhēng)議的居中問(wèn)題。
css居中分為水平居中和垂直居中，水平居中方式也較為常見(jiàn)和統(tǒng)一，垂直居中的方法就千奇百怪了。本文是我積累的若干css居中的方法，先后討論了塊級(jí)元素的和行內(nèi)元素的垂直居中和水平居中，特此記錄下來(lái)與大家分享。如有敘述不當(dāng)?shù)牡胤?，還望指出。o(￣▽￣)ブ

本文以下代碼中 .outer是父元素的類名，.inner塊級(jí)代表子元素,span代表行內(nèi)子元素。

水平居中 1. 行內(nèi)元素的水平居中

直接設(shè)置其父元素

.ourter{
text-align: center;
}


不管有幾個(gè)行內(nèi)元素，一行代碼即可搞定，so easy~

2. 塊級(jí)元素的水平居中

也非常簡(jiǎn)單吶
設(shè)置該塊級(jí)元素

div{
margin: 0 auto;                                                  
}

但是！但是！如果該元素的position為absolute的話，該方法會(huì)失效。
我是這樣理解的：margin為auto即相當(dāng)于外邊距的值是自動(dòng)的，相對(duì)的，所以在絕對(duì)定位下將失效。不過(guò)還是可以將其margin設(shè)為具體數(shù)值滴。

垂直居中

有很多關(guān)于垂直居中tricks,博主在這里只介紹一些比較簡(jiǎn)單常用的
如果對(duì)高度沒(méi)有要求的哈

1. 行內(nèi)元素的垂直居中

1）如果對(duì)父元素的高度沒(méi)有具體的要求的話，將父元素的padding-top padding-bottom設(shè)置為相同的值即可。

.outer{
padding-top: 60px;
padidng-bottom: 60px;                                                       
width：300px;
height: auto; /*注意：此時(shí)父元素的height不能是具體數(shù)值*/
}

2）如果要求父元素的高度為具體數(shù)值時(shí)，且確保行內(nèi)元素不會(huì)換行時(shí)，可以設(shè)置line-height等于父元素的高度

.outer{
width: 300px;
height: 200px;
line-height: 200px;                                                  
/*text-align: center; */                                    
}

此時(shí)，即可實(shí)現(xiàn)行內(nèi)元素的垂直居中。若把最后一行加上，即可同時(shí)實(shí)現(xiàn)水平和垂直居中。
但是?。?！一定要確保不會(huì)換行，也就是只有一行。
3）在保持父元素具體數(shù)值寬度不變且有不止一行時(shí)，可以使用一點(diǎn)小tricks,比如

.outer{
text-align: center;                                                              
height: 200px;
width: 300px;
}
.outer::before{
content: " ";
height: 100%;
width: 1%;
display: inline-block;
vertical-align: middle;
}
/*html代碼如下*/


    span1
    span2

但是，注意：因?yàn)関ertical-align是指行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊方式，所以該方法只對(duì)行內(nèi)元素有效
效果：

2. 塊級(jí)元素的垂直居中

1）如果已知子元素的高度，可以這樣

.outer{
position: relative;                                                       
}
.inner{
height：50px;
width:50px;
position: absolute;
top: 50%;
margin-top: -25px;  /*該元素高度的一半*/                                  
}

注意子元素和父元素的position，切記父元素的position是relative


2）如果不知道子元素的高度，可以利用css的transform屬性，對(duì)1）進(jìn)行小改動(dòng)，如下：

.outer{
position: relative;                                                         
}
.inner{
width:50px;
position: absolute;
top: 50%;
transform: translateY(-50%);                                                    
}

3）但以上兩種方式對(duì)于有多個(gè)塊級(jí)子元素的情況就不適用了，比如，這樣的情況

這時(shí)我們可以用一個(gè)div把所有子元素包裹起來(lái)，變成一個(gè)子元素，然后就可以繼續(xù)使用上面的方法了。

最最后！上面的所有方法都是在不使用flex的前提下的才使用的！解決居中問(wèn)題最爽的當(dāng)然是flex布局啦，O(∩_∩)O~~
什么？！還不會(huì)使用flex布局？趕緊點(diǎn)下面~

flex布局學(xué)習(xí)總結(jié)
使用flex，管它是行內(nèi)元素還是塊級(jí)元素，管它有幾個(gè)元素，統(tǒng)統(tǒng)搞定！
舉個(gè)栗子！
實(shí)現(xiàn)多個(gè)塊級(jí)元素的垂直加水平居中

.outer{
display: flex;
justify-content: center;                                                              
align-items: center;
flex: 0 0 auto;
/* flex-direction: column;  */
}

效果圖如下:

如果加上最后一行，則豎直排列子元素，即：

是不是很簡(jiǎn)便膩~O(∩_∩)O哈！

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

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

相關(guān)文章

  • vertical-align屬性與垂直居中

    摘要：方法二利用，設(shè)置元素結(jié)構(gòu)，并應(yīng)用實(shí)現(xiàn)垂直居中，這種方法的實(shí)現(xiàn)可用于多行文本，要求及以上版本。 讓元素居中對(duì)齊是非常常見(jiàn)的需求，首先是水平居中，要實(shí)現(xiàn)水平居中行內(nèi)元素只需要在其父元素上設(shè)置text-align: center即可，對(duì)于塊級(jí)元素來(lái)說(shuō)讓它的margin-left: auto和margin-right: auto即可（width不可為auto），那么垂直居中呢？找下css屬性發(fā)...

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

  • 白淺教你CSS的垂直居中方法

    showImg(https://segmentfault.com/img/bVJcnS?w=377&h=83); placeholder: 我是一個(gè)不正經(jīng)的屬性. ----題記 ???????說(shuō)道頁(yè)面垂直居中, 在大家的思維中, 很快就能有若干個(gè)(常用...

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

  • CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

    摘要：但是部分瀏覽器存在兼容性的問(wèn)題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹(shù) showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹(shù),下次再遇到...

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

  • CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

    摘要：但是部分瀏覽器存在兼容性的問(wèn)題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹(shù) showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹(shù),下次再遇到...

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

  • CSS-水平居中、垂直居中、水平垂直居中

    摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級(jí)元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實(shí)現(xiàn)。 1、水平居中 水平居中可分為行內(nèi)元素水平居中和塊級(jí)元素水平居中 1.1 行內(nèi)元素水平居中 這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實(shí)現(xiàn)。 .center{ te...

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

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

0條評(píng)論

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