css水平垂直居中

jaysun 發布于2019-08-29 12:39 / 2751人閱讀

摘要：要讓下圖中綠色框水平垂直居中，你是怎么實現的，可能每個人都有自己習慣的使用方法。把元素設為方法在父元素中設置和然后設置垂直對齊方式為居中就可以適合父元素高固定的，畢竟要設置行高。本篇博客首發于本人博客水平垂直居中

要讓下圖中綠色框水平垂直居中，你是怎么實現的，可能每個人都有自己習慣的使用方法。下面是我總結的幾種方法廢話不多說，直接上菜。

1.利用絕對定位

方法：把top和 left 偏移 50%，在用margin 偏移回去。
適合：已經固定大小的元素。做響應的話可能根據實際需要還需要js的操作。

div1{
    background:gold;
    width:500px;
    height:500px;
    position:relative;
}
div2{
    width:400px;
    height:400px;
    background:greenyellow;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-200px;
    margin-left:-200px;
}

2..利用絕對定位

方法：把偏移都設為0，在用margin 自動屬性居中。
適合：:已經固定大小的元素，不設置寬高，它會撐滿整個父元素。

   #div1{
        background:gold;
        width:500px;
        height:500px;
        position:relative;
    }
    #div2{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        width:400px;
        height:400px;
        margin:auto;
        background:greenyellow;
    }

3.利用偽元素

方法：div2和::after都轉為inline-block，在父元素中設文本居中來達到元素水平居中，把偽元素寬度設為100%，然后div2和::after都垂直垂直對齊方式為middle。
適合：寬高不定的元素，元素會隨內容改變大小，但不管怎么改變，就是可以始終維持垂直和水平置中。

#div1{
            background:gold;
            width:500px;
            height:500px;
            text-align:center;
        }
        #div2{
            background:greenyellow;
            height:400px;
            width:400px;
            display:inline-block;
            vertical-align:middle;
        }
        #div1::after{
            content:"";
            height:100%;
            display:inline-block;
            background:green;
            vertical-align:middle;
       }

4.利用偽元素

這個方法和方法3差不多，只是元素屬性不太一樣。

#div1{
            background:gold;
            width:500px;
            height:500px;
            text-align:center;
        }
        #div2{
            background:greenyellow;
            height:400px;
            width:400px;
            display:inline-block;
            vertical-align:middle;
        }
        #div1::after{
            content:"";
            height:50%;
            display:inline-block;
            background:green;
        }

5.把元素設為inline-block

方法：在父元素中設置line-height和center然后設置垂直對齊方式為居中就可以
適合：父元素高固定的，畢竟要設置行高。

#div1{
        background:gold;
        width:500px;
        height:500px;
        line-height:500px;
        text-align:center;
    }
    #div2{
        width:400px;
        height:400px;
        vertical-align:middle;
        display:inline-block;
        background:greenyellow;
    }

你可以根據實際情況使用不同方法。
本篇博客首發于本人博客,css水平垂直居中

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112053.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