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

資訊專欄INFORMATION COLUMN

常見的div居中對齊方式

genedna / 2861人閱讀

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

前段時間面試的時候面試題里面對css考察最多的就是div居中對齊的問題，因此特地對div居中對齊的方式做了一個簡單的總結(jié)，本文的目標(biāo)就是希望各位在以后根據(jù)不同的情況使用不同的居中方式，閑話少說，直接上代碼
Flex布局實現(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,即可實現(xiàn)水平方向上的對齊，再利用align-items設(shè)置側(cè)軸上的對齊方式center,即可實現(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)一個絕對定位元素，其對立方向?qū)傩酝瑫r具有數(shù)值時，其流體特性就觸發(fā)了，margin當(dāng)兩側(cè)的值都是auto時會平分剩余空間的大小，因此當(dāng)四個方向都是auto時就可以實現(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)容是個人的一點總結(jié)，如果有錯誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評指正，如果喜歡，歡迎點贊收藏

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

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

相關(guān)文章

  • 常見的div居中對齊方式

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

    Karuru 評論0 收藏0

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

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

    Anchorer 評論0 收藏0

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

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

    frontoldman 評論0 收藏0

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

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

    Sanchi 評論0 收藏0

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

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

    xuhong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<