欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS 垂直水平居中的5種最佳解決方案

  發(fā)布時間：2018-01-11 15:00:08   作者：佚名   我要評論
本文給大家分享CSS 垂直水平居中的5種最佳解決方案以及各自的優(yōu)缺點，本文給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友參考下吧

CSS 居中對齊

  • 代碼中均省略了瀏覽器前綴
  • 以下例子以我的個人的標(biāo)準(zhǔn)排序
  • 當(dāng)然也有更多的居中處理方法 但我覺得只有這5種方法是最完善的解決方案

flex 居中

優(yōu)點：可對未知高度進行居中處理

<style>
    .wrap{height: 100%;display: flex; justify-content: center; align-items: center;align-content:center;}
    
    .other{background-color: #ccc; width: 400px;height: 400px;} /* 額外的樣式 可去除 */
</style>
<div class="wrap">
    <div class="other">
        <h2>這是第二層的內(nèi)容 不會居中</h2>
    </div>
</div>

position + translate 居中

優(yōu)點： 可對未知高度進行居中處理、嵌套層最少

<style>
    /* position 可選 absolute|fixed*/
    .center{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);}
    
    .other{background-color: #ccc; } /* 額外的樣式 可去除 */
</style>
<div class="center other">
    <h2>這一層的內(nèi)容 不會居中</h2>
</div>

table-cell 居中

缺點：1. 居中層需要設(shè)置寬度(.center)。 2.外層多嵌套一層(.cell) 3. 居中層必須設(shè)置寬度(允許 %)

<style>
    .wrap{display: table;width: 100%;height: 100%;}
    .cell{display: table-cell;vertical-align:middle;}
    .center{width: 400px;margin-left:auto;margin-right:auto;}
    .other{background-color: #ccc;  height: 400px;} /* 額外的樣式 可去除 */
</style>
<div class="wrap">
    <div class="cell">
        <div class="center other">
            <h2>這一層的內(nèi)容 不會居中</h2>
        </div>
    </div>
</div>

傳統(tǒng)居中 (2種)

缺點：1. margin 值必須為auto。 2. 居中層必須設(shè)置高寬(允許 %) 3. 必須使用 position

<style>
    /*
        1. left、top、right、bottom 可以任意,但必須相等
        2. position 可選 absolute|fixed
    */
    .center{position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;margin: auto;width: 400px;height: 400px;}
    .other{background-color: #ccc; } /* 額外的樣式 可去除 */
</style>
<div class="center other">
    <h2>這一層的內(nèi)容 不會居中</h2>
</div>

缺點： 居中層必須設(shè)置固定高寬,并且magin需要通過高寬計算得出。

<style>
    .wrap{position: relative;height: 100%;}
    .center{position: absolute;left: 50%;top: 50%; width: 400px;height: 300px; margin-left: -200px;margin-top: -150px;}
    .other{background-color: #ccc; } /* 額外的樣式 可去除 */
</style>
<div class="wrap">
    <div class="center other">
        <h2>這一層的內(nèi)容 不會居中</h2>
    </div>
</div>

總結(jié)

以上所述是小編給大家介紹的CSS 垂直水平居中的5種最佳解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • CSS水平垂直居中解決方案(6種)

    這篇文章主要介紹了CSS水平垂直居中解決方案(6種)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-10

  • 利用css設(shè)置元素垂直居中的解決方法匯總

    作為前端攻城師，在制作Web頁面時都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，特別的其中的垂直居中，更是讓人煩惱，下面這篇文章主要給大家匯總介紹了關(guān)于
    2017-09-12

  • CSS實現(xiàn)垂直居中的4種思路詳解

    這篇文章給大家整理四種css實現(xiàn)垂直居中效果，思路明了非常不錯，具有參考借鑒價值，需要的朋友參考下吧
    2017-09-06

  • css實現(xiàn)元素水平垂直居中常見的兩種方式實例詳解

    這篇文章主要給大家介紹了css實現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對大家的學(xué)習(xí)或者工作具有一定的參考價值，有需要的朋友們下面來
    2017-04-23

  • CSS水平垂直居中的幾種方法總結(jié)

    這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。
    2016-12-19

  • css讓容器水平垂直居中的7種方式

    這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-10-17

  • 利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局

    這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考
    2016-09-12

  • CSS設(shè)置文字圖片垂直居中的方法總結(jié)

    這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊，文中給出了實例代碼，有需要的朋友們可以參考借鑒。下面來一起看看吧。
    2016-09-12

  • 深入理解CSS行高line-height與文本垂直居中的原理

    本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理，通過本文的介紹相信對大家以后使用line-height和設(shè)置文本垂直居中會更加熟練，有需要的可以參考借鑒。下面一
    2016-08-12

  • 23種CSS垂直居中技巧

    本文給大家分享23中css垂直居中的處理方法，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-08-27

最新評論