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

資訊專欄INFORMATION COLUMN

常見的div居中對齊方式

Karuru / 3422人閱讀

摘要：前段時(shí)間面試的時(shí)候面試題里面對考察最多的就是居中對齊的問題，因此特地對居中對齊的方式做了一個(gè)簡單的總結(jié)，本文的目標(biāo)就是希望各位在以后根據(jù)不同的情況使用不同的居中方式，閑話少說，直接上代碼布局實(shí)現(xiàn)父元素設(shè)置為使

前段時(shí)間面試的時(shí)候面試題里面對css考察最多的就是div居中對齊的問題，因此特地對div居中對齊的方式做了一個(gè)簡單的總結(jié)，本文的目標(biāo)就是希望各位在以后根據(jù)不同的情況使用不同的居中方式，閑話少說，直接上代碼
Flex布局實(shí)現(xiàn) 
.wrapper{
    display: flex;
    width: 500px;
    height: 500px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.wrapper .inner{
    width: 300px;
    height: 300px;
    background-color: #666;
}

父元素display設(shè)置為flex,使用flexbox布局，在此布局下的元素就具備了伸縮的特性，再通過justify-content設(shè)置元素主軸上的對齊方式center,即可實(shí)現(xiàn)水平方向上的對齊，再利用align-items設(shè)置側(cè)軸上的對齊方式center,即可實(shí)現(xiàn)垂直方向上的對齊

流體特性 
 .wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: #666;
}

當(dāng)一個(gè)絕對定位元素，其對立方向?qū)傩酝瑫r(shí)具有數(shù)值時(shí)，其流體特性就觸發(fā)了，margin當(dāng)兩側(cè)的值都是auto時(shí)會(huì)平分剩余空間的大小，因此當(dāng)四個(gè)方向都是auto時(shí)就可以實(shí)現(xiàn)水平和垂直方向的居中

transform平移 
.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    background-color: #666;
}
已知寬高絕對定位 
.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    margin-top: 50%;
    margin-left: 50%;
    top: -150px;
    left: -150px;
    width: 300px;
    height: 300px;
    background-color: #666;
}

以上內(nèi)容是個(gè)人的一點(diǎn)總結(jié)，如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏

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

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

相關(guān)文章

  • 常見的div居中對齊方式

    摘要：前段時(shí)間面試的時(shí)候面試題里面對考察最多的就是居中對齊的問題，因此特地對居中對齊的方式做了一個(gè)簡單的總結(jié)，本文的目標(biāo)就是希望各位在以后根據(jù)不同的情況使用不同的居中方式，閑話少說，直接上代碼布局實(shí)現(xiàn)父元素設(shè)置為使 前段時(shí)間面試的時(shí)候面試題里面對css考察最多的就是div居中對齊的問題，因此特地對div居中對齊的方式做了一個(gè)簡單的總結(jié)，本文的目標(biāo)就是希望各位在以后根據(jù)不同的情況使用不同的居中...

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

  • CSS用法的一些總結(jié)

    摘要：黃金檔未垂直對齊同一行的一組為的使用了或者是時(shí)，如果某個(gè)的內(nèi)部標(biāo)簽中填充一些文字等內(nèi)容，可能就會(huì)出現(xiàn)垂直不對齊的情況。解決方法倒不難的應(yīng)用會(huì)被其他一些屬性破壞，例如和，所以與或是屬性最好不要同用。 工作上，除了Django和一些并不復(fù)雜的腳本以外，其余時(shí)間寫了大量的CSS和jQuery，現(xiàn)在回頭看之前的一些代碼，寫得十分丑陋又低效，其中的CSS就有很大改進(jìn)空間。正如多數(shù)人的認(rèn)知一樣，H...

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

  • CSS元素垂直居中【內(nèi)含vertical-align 與 line-height 屬性詳解】

    摘要：所以文字最終可以在整個(gè)中垂直居中顯示。默認(rèn)值為，即把元素放在父元素的基線上。萬萬沒想到用兩行代碼就實(shí)現(xiàn)了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。 請一定看到最后，flex太令人驚喜！ ヾ(o???)? 入個(gè)門 先來考慮這樣一個(gè)問題：一行文字在一個(gè)固定高度的父div中怎樣做到垂直居中？我們都知道設(shè)置父div的line-height 等于它的height就可以了，像下面...

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

  • CSS元素垂直居中【內(nèi)含vertical-align 與 line-height 屬性詳解】

    摘要：所以文字最終可以在整個(gè)中垂直居中顯示。默認(rèn)值為，即把元素放在父元素的基線上。萬萬沒想到用兩行代碼就實(shí)現(xiàn)了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。 請一定看到最后，flex太令人驚喜！ ヾ(o???)? 入個(gè)門 先來考慮這樣一個(gè)問題：一行文字在一個(gè)固定高度的父div中怎樣做到垂直居中？我們都知道設(shè)置父div的line-height 等于它的height就可以了，像下面...

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

  • 結(jié)合CSS3的布局新特征談?wù)?em>常見布局方法

    摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學(xué)可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。 寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識(shí)，這里進(jìn)行一次基于CSS2、3的各種布局的方法總結(jié)。 常見的頁面布局 在拿到設(shè)計(jì)稿時(shí)，作為一個(gè)前端人員，我們首先會(huì)做的應(yīng)該是為設(shè)計(jì)圖大致地劃分區(qū)域，然后選擇一...

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

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

0條評(píng)論

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