CSS 水平垂直居中

wujl596 發布于2019-08-29 15:27 / 2246人閱讀

摘要：聚沙成塔，聚水成涓父元素高度確定的單行文本設置只是單行文本水平垂直居中，塊級元素并沒有實現水平垂直居中方法一使用，設置特點兼容性好，不過需固定寬高注意如果不設置為則將基于根元素定位居中實現水平垂直居中方法二同時設置特點可

聚沙成塔，聚水成涓！

line-height

父元素高度確定的單行文本設置 height=line-height

   body {
        background: black;
    }
    
    .c2 {
        height: 80px;
        line-height: 80px;
        width: 80px;
        text-align: center;
        background: red;
    }
   


    123123

只是單行文本水平垂直居中，塊級元素并沒有

position:absolute 實現水平垂直居中方法一

使用position:absolute，設置 left、top、margin-left、margin-top

  .c1 {
        height: 300px;
        width: 300px;
        background: black;
        position: relative;
    }
    
    .c2 {
        height: 200px;
        width: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        background: red;
    }

特點：兼容性好，不過需固定寬高
注意：如果不設置c1 position為relative,則c2將基于根元素定位居中

position: absolute 實現水平垂直居中方法二

position:absolute,同時設置top/bottom/right/left

body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: red;
    }

特點：可不用設置高寬，且兼容性好

position: fixed 可實現水平垂直居中方法一

使用position:fixed,同樣設置left、top、margin-left、margin-top的屬性

 body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        background: red;
    }

特點：position:fixed; IE 不支持,且需固定寬高

position: fixed 實現水平垂直居中方法二

設置position:fixed ，同時設置left/right/top/bottom為0，margin:auto

   body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: red;
    }

特點： position:fixed IE 不支持，不過不需固定寬高

display: table-cell

display:table-cell屬性使內容垂直居中

 body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        background: red;
    }


    123123

特點：使內容居中，塊級元素不能居中

CSS3 display: -webkit-box

使用css3的display:-webkit-box屬性，再設置-webkit-box-pack:center/-webkit-box-align:center

  body {
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        color: yellow;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        background: red;
    }
    
       
           123123

特點：無需定寬高，行內和塊級元素都可水平垂直居中！但CSS3 IE 兼容性要考慮

CSS3 transform:translate(x,y)

 body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background: red;
    }
    
       
         123123

特點：無需固定寬高但只能使塊級元素水平垂直居中！但CSS3 在 IE 兼容性需要考慮

GPU云服務器云服務器水平垂直居中垂直居中實現垂直居中文字垂直居中

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

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

CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

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

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

Apollo 2019-08-30 14:15 評論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
【前端】這可能是你看過最全的css居中解決方案了~

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

csRyan 2019-08-30 13:54 評論0 收藏0