CSS的居中方式

lushan 發布于2019-08-29 12:28 / 809人閱讀

摘要：這樣一來外部容器正好可以將內容垂直的包裹住并且由于外部容器是浮動的所以容器的寬度和內層的寬度一致這樣可以做到完全自適應的實現居中。

剛學習CSS的時候嘗試過幾種居中的方法,這些方法不需要借助JS手段,所寫的方法有一個原則,就是在不需要直接人為的設定好寬高計算后再實現居中,還有諸如table布局啊、行高設定、margin：auto之類的我就不寫了。

以下幾種方法針對不同的瀏覽器,經過測試,從IE8及以下到IE9+、Safari都有不同的方法支持。

1.標準瀏覽器全兼容,內容水平居中

    .wraper{
        float:left;
        position:relative;
        left:50%;
        clear:both;
    }
    .wraper div{
        border:1px solid palevioletred;
        position:relative;
        left:-50%;
    }

    
        瓜迪奧拉
    
    
        克洛普克洛普克洛普克洛普克洛普克洛普克洛普
    
    
        孔蒂
    
    
        穆里尼奧
    
    
        溫格

這種方法的原理是讓容器層和內層都相對自己移動,容器層移動自身寬度的50%,內層相對于移動自身寬度的-50%。這樣一來外部容器正好可以將內容垂直的包裹住,并且由于外部容器是浮動的,所以容器的寬度和內層的寬度一致,這樣可以做到完全自適應的實現居中。該方法適用于豎向排版的情況。

2.IE9+以上的瀏覽器,垂直居中

    div{
        position: absolute;
        width:100px;
        height:50px;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;
        background:#f60;
    }

這個方法原理不太清楚,我是這樣理解的,當這個div哪里也去不了,然后margin還是auto的時候,他就只能相對于外部容器垂直居中了..

3.IE8及以下的垂直居中

    .parent{
        height:500px;
        width:500px;
        font-size:438.6px;/*(font-size:width/114)*/
        background-color:paleturquoise;
    }
    .child{
        background-color:deepskyblue;
        vertical-align:middle;
        zoom:1;
        display:inline;
        width:50px;
        height:50px;
        font:18px/18px "微軟雅黑";
    }
    /*.child一定要寫上font屬性,這個方法在ie中才會實現.*/

這個方法只有IE8及以下才可以實現,至今也沒明白父級的font-size屬性為什么一定要等于寬度/114,IE真是一個奇葩的存在...在虛擬機下測試這個方法確實有效,子級一定要寫font-size屬性,即使沒有內容也要寫,否則無效。針對IE8以下的兼容性時,這個方法可以作為一種hack使用。

4.除IE和Safari之外的標準瀏覽器

IE是指9及以下,我只測試了這些版本的IE,另外Safari也是不支持的。

    .box{
        width:600px;
        height:600px;
        border:1px solid palegreen;
        position:relative;
    }
    .item{
        width:200px;
        height:200px;
        border:1px solid palegreen;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);         
    }

容器和內層都已經脫離了文檔流,內層先移動自身的50%,再通過transform屬性移動自身的-50%,修正后的top、left就正好處于容器內的垂直居中位置了。

5.flex方法

IE依然不支持CSS3是必須的,遺憾的是Safari依然是不支持的,至少在我測試階段(5.1.7)window下還沒有支持。

    #box{
        width:800px;
        height:800px;
        display:flex;
        border:1px solid palevioletred;
    }
    #box div{
        width:200px;
        height:200px;
        border:1px solid #2189BF;
        flex-direction:row;
        justify-content:center;
        align-self: center;
    }

flex針對垂直居中的方法比較直接,justify-content:center; align-self: center;這兩個屬性直接設置為center就可以了,在不支持CSS3的瀏覽器中是無法實現的,這也是flex的暫時的缺點之一。

云服務器 GPU云服務器 html居中css css引入方式 HTML的居中 html層的居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111924.html

前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0
CSS居中方法總結

摘要：此時檢查元素即可即可實現內層的實現了居中這種方式是最為我們熟知的，其缺點是需要設置子元素的寬度。交叉軸居中當設置了屬性時，主軸的方向會改變。垂直居中實現方案用的屬性，以及定位，與上面的水平居中類似，只是改為即可。水平居中實現方案確定寬度的元素水平居中 1.我們可以通過給該元素的父級設置margin: 0 auto的方式來實現。HTML: ...

ralap 2019-08-30 13:07 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

mayaohua 2019-08-29 18:44 評論0 收藏0