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

資訊專(zhuān)欄INFORMATION COLUMN

最全面的水平垂直居中方案與flexbox布局

chenjiang3 / 2305人閱讀

摘要：核心代碼如下法三布局輕松解決使用布局，無(wú)需絕對(duì)定位等改變布局的操作，可以輕松實(shí)現(xiàn)元素的水平垂直居中。

最近又遇到許多垂直居中的問(wèn)題，這是Css布局當(dāng)中十分常見(jiàn)的一個(gè)問(wèn)題，諸如定長(zhǎng)定寬或不定長(zhǎng)寬的各類(lèi)容器的垂直居中，其實(shí)都有很多種解決方案。而且在Css3的flexbox出現(xiàn)之后，解決各類(lèi)居中問(wèn)題變得更加容易了。搜了搜園子內(nèi)關(guān)于flexbox的文章覺(jué)得很多不夠詳盡，故想借介紹flexbox的同時(shí)好好總結(jié)一番各類(lèi)垂直居中的方法。

由簡(jiǎn)至繁：

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

要實(shí)現(xiàn)行內(nèi)元素（、、

  • 、

    等）中，并且在父層元素CSS設(shè)置如下：

        #container{
        text-align:center;
    }
    并且適用于文字，鏈接，及其inline或者inline-block、inline-table和inline-flex。

    Demo

    塊狀元素的水平居中

    要實(shí)現(xiàn)塊狀元素（display:block）的水平居中，我們只需要將它的左右外邊距margin-left和margin-right設(shè)置為auto，即可實(shí)現(xiàn)塊狀元素的居中，要水平居中的塊狀元素CSS設(shè)置如下：

    #center{
    margin:0 auto;
}


    Demo

    多個(gè)塊狀元素的水平居中

    要實(shí)現(xiàn)多個(gè)水平排列的塊狀元素的水平居中，傳統(tǒng)的方法是將要水平排列的塊狀元素設(shè)為display:inline-block，然后在父級(jí)元素上設(shè)置text-align:center，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。

    #container{
    text-align:center;
}

#center{
    display:inline-block;
}

    Demo

    使用flexbox實(shí)現(xiàn)多個(gè)塊狀元素的水平居中

    在使用之前，首先介紹一下flexbox。

    Flexbox布局（Flexible Box)模塊旨在提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里的項(xiàng)目布局，即使他們的大小是未知或者是動(dòng)態(tài)的。是CSS3 中一個(gè)新的布局模式，為了現(xiàn)代網(wǎng)絡(luò)中更為復(fù)雜的網(wǎng)頁(yè)需求而設(shè)計(jì)。

    Flexbox 已經(jīng)被瀏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ，firefox18+已經(jīng)支持了本文中所描述的 Flexbox。

    　　

    學(xué)會(huì)使用flexbox

    要為元素設(shè)置flexbox布局，只需將display屬性值設(shè)置為flex。

    1 #container {
2     display: flex;
3 }

    flexbox的默認(rèn)為一個(gè)塊級(jí)元素，如果需要定義為一個(gè)行內(nèi)級(jí)的元素，同理：

    1 #container {
2     display: inline-flex;
3 }

    flexbox由伸縮容器和伸縮項(xiàng)目組成。通過(guò)設(shè)置元素的display屬性為flex或者inline-flex可以得到一個(gè)伸縮容器。設(shè)置為flex的容器被渲染為一個(gè)塊級(jí)元素，而設(shè)置為inline-flex的容器則渲染為一個(gè)行內(nèi)元素。而每一個(gè)被設(shè)置為flex的容器，它的內(nèi)部元素都將變成一個(gè)flex項(xiàng)目，即是一個(gè)伸縮項(xiàng)目。簡(jiǎn)單的說(shuō)，flex 定義了伸縮容器內(nèi)伸縮項(xiàng)目該如何布局。

    回到正題，利用flexbox實(shí)現(xiàn)多塊狀元素的水平居中，只需要將父級(jí)容器的Css設(shè)置如下：

    1 #container{
2     justify-content:center;
3     display:flex;
4 }


    Demo

    已知高度寬度元素的水平垂直居中

    法一.

    絕對(duì)定位與負(fù)邊距實(shí)現(xiàn)。

    利用絕對(duì)定位，將元素的top和left屬性都設(shè)為50%，再利用margin邊距，將元素回拉它本身高寬的一半，實(shí)現(xiàn)垂直居中。核心CSS代碼如下：

    #container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}


    Demo

    法二.

    絕對(duì)定位與margin。

    這種方法也是利用絕對(duì)定位與margin，但是無(wú)需知道被垂直居中元素的高和寬。核心代碼如下：

    #container{
    position:relative;
}

#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

    Demo

    未知高度和寬度元素的水平垂直居中

    法一. 當(dāng)要被居中的元素是inline或者inline-block元素

    當(dāng)要被居中的元素是inline或者inline-block的時(shí)候，可以巧妙的將父級(jí)容器設(shè)置為display:table-cell，配合text-align:center和vertical-align:middle即可以實(shí)現(xiàn)水平垂直居中。

    核心代碼如下：

    #container{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

#center{

}

    Demo

    法二. Css3顯威力

    利用Css3的transform，可以輕松的在未知元素的高寬的情況下實(shí)現(xiàn)元素的垂直居中。

    核心代碼如下：

    #container{
    position:relative;
}

#center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    Demo

    法三. flex布局輕松解決

    使用flex布局，無(wú)需絕對(duì)定位等改變布局的操作，可以輕松實(shí)現(xiàn)元素的水平垂直居中。

    核心代碼如下：

    #container{
    display:flex;
    justify-content:center;
    align-items: center;
}

#center{

}


    Demo

    一些總結(jié)

    CSS3的transform和flex固然好用，但在項(xiàng)目的實(shí)際運(yùn)用中必須考慮兼容問(wèn)題，大量的hack代碼可能會(huì)導(dǎo)致得不償失。

    某些瀏覽器仍需使用前綴寫(xiě)法:

    1 .flexboxtest{
2   display: flex;
3   display: -webkit-flex; //Safari仍舊需要使用特定的瀏覽器前綴
4 }

    文中介紹的flex用法只是一小部分，flex還有著其他強(qiáng)大的功能。

    學(xué)習(xí)前端的同學(xué)注意了?。?！
    學(xué)習(xí)過(guò)程中遇到什么問(wèn)題或者想獲取學(xué)習(xí)資源的話，歡迎加入前端學(xué)習(xí)交流群461593224，我們一起學(xué)前端！

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

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

    相關(guān)文章

    • 最全面的水平垂直居中方案與flexbox布局

      摘要：核心代碼如下法三布局輕松解決使用布局，無(wú)需絕對(duì)定位等改變布局的操作，可以輕松實(shí)現(xiàn)元素的水平垂直居中。 最近又遇到許多垂直居中的問(wèn)題，這是Css布局當(dāng)中十分常見(jiàn)的一個(gè)問(wèn)題，諸如定長(zhǎng)定寬或不定長(zhǎng)寬的各類(lèi)容器的垂直居中，其實(shí)都有很多種解決方案。而且在Css3的flexbox出現(xiàn)之后，解決各類(lèi)居中問(wèn)題變得更加容易了。搜了搜園子內(nèi)關(guān)于flexbox的文章覺(jué)得很多不夠詳盡，故想借介紹flexbox...

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

    • 最全面的水平垂直居中方案與flexbox布局

      摘要：核心代碼如下法三布局輕松解決使用布局，無(wú)需絕對(duì)定位等改變布局的操作，可以輕松實(shí)現(xiàn)元素的水平垂直居中。 最近又遇到許多垂直居中的問(wèn)題，這是Css布局當(dāng)中十分常見(jiàn)的一個(gè)問(wèn)題，諸如定長(zhǎng)定寬或不定長(zhǎng)寬的各類(lèi)容器的垂直居中，其實(shí)都有很多種解決方案。而且在Css3的flexbox出現(xiàn)之后，解決各類(lèi)居中問(wèn)題變得更加容易了。搜了搜園子內(nèi)關(guān)于flexbox的文章覺(jué)得很多不夠詳盡，故想借介紹flexbox...

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

    • 【前端】這可能是你看過(guò)最全的css居中解決方案了~

      摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類(lèi)型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個(gè)屬性為的父級(jí)元素中如設(shè)置這個(gè)父級(jí)元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類(lèi)型元素（inline-block，inline-table，i...

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

    • 【前端】這可能是你看過(guò)最全的css居中解決方案了~

      摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類(lèi)型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個(gè)屬性為的父級(jí)元素中如設(shè)置這個(gè)父級(jí)元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類(lèi)型元素（inline-block，inline-table，i...

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

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

    0條評(píng)論

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