CSS 水平居中

zhaofeihao 發布于2019-08-29 15:27 / 2894人閱讀

摘要：零散的知識不整理進入自己的知識框架太容易忘，對于腦子里零零散散的整理自勉水平居中塊級元素水平居中此居中的方法前提為居中塊級元素寬度必須固定才可設置自動計算左右補白可見塊的設置為后實現水平居中，但是設置為確并不能垂直居中特點瀏覽器兼容

零散的知識不整理進入自己的知識框架太容易忘，對于CSS腦子里零零散散的！整理自勉！

水平居中 塊級元素水平居中 margin：auto

此居中的方法前提為居中塊級元素寬度必須固定才可設置auto自動計算左右補白

   .block1{
        height: 300px;
        width: 600px;
        background: black;
    }
    
    .block2{
        height: 100px;
        width: 100px;
        margin: auto;
        background: red;
    }

可見塊2的margin-left,margin-right設置為auto后實現水平居中，但是margin-top,margin-bottom設置為auto確并不能垂直居中！
特點：瀏覽器兼容性強，但擴展性差，無法自適應未知項情況

text-align:center

text-align 屬性規定元素中的文本的水平對齊方式！顯然不是用來給塊級元素水平居中的，不過可設置塊級元素為行內塊級元素時便可實現水平居中

 .block1 {
        height: 300px;
        width: 600px;
        background: black;
        text-align: center;
    }
    
    .block2 {
        height: 100px;
        display: inline-block;
        background: red;
    }

    11111111111

特點：擴展性強，但需要額外處理inline-block的瀏覽器兼容性
注：該種方法可以讓display為inline/inline-block/inline-table/inline/flex值的子元素居中

position:absolute

通過設置子元素為絕對定位元素還有left和margin-left的值可以達到居中效果

 .block1 {
        height: 300px;
        width: 600px;
        position: relative;
        background: black;
    }
    
    .block2 {
        height: 100px;
        width: 100px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        background: red;
    }

特點：必須知道子元素的寬度才能設置左邊補白的負值
注：網上有說法可以通過和float來實現不定寬度塊級元素居中（還未深究）

CSS3 flex實現水平居中方法

Flex主要用來布局！ Flex布局，可以簡便、完整、響應式地實現各種頁面布局。后面整理flex布局筆記！

  .block1 {
        height: 300px;
        width: 600px;
        display: flex;
        justify-content: center;
        background: black;
    }
    
    .block2 {
        height: 100px;
        background: red;
    }
  
    1123123

特點：實現便捷，擴展性強但兼容需要考慮

CSS3 width:fit-content

width:fit-content可以實現元素收縮效果的同時，保持原本的block水平狀態，于是，就可以直接使用margin:auto實現元素向內自適應同時的居中效果了

  .block1 {
        height: 300px;
        width: 600px;
        background: black;
    }
    
    .block2 {
        height: 100px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        background: red;
    }
 
    1123123

特點：擴展性強，但兼容性差;

float

浮動居中有待好好研究！
特點：兼容性強，擴展性強！但實現原理較復雜

云服務器 GPU云服務器水平居中水平垂直居中水平居中布局 html的水平居中

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113331.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
【前端】這可能是你看過最全的css居中解決方案了~

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

csRyan 2019-08-30 13:54 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

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

Simon 2019-08-01 18:31 評論0 收藏0
css-元素居中

摘要：一水平居中行內元素水平居中使用屬性可以實現在行內元素包括在塊級父元素水平居中。使用負已知高度寬度使用使用使用三水平垂直居中公共結構塊級元素垂直居中。本文重要是匯總了關于水平居中，垂直居中，還有水平垂直居中的各種方法。一、水平居中 1.行內元素水平居中使用text-align:center;屬性可以實現在行內元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 評論0 收藏0
CSS/CSS3 實現居中（水平&垂直）

摘要：，水平居中行內元素把行內元素放在一個屬性塊元素中，然后設置父層元素屬性居中，水平居中塊狀元素設置外邊距，水平居中多個塊狀元素把塊狀元素屬性，然后設置父層元素屬性居中，水平居中多個塊狀元素布局實現把塊狀元素的父元素屬性和，如下設置， 1，水平居中：行內元素把行內元素放在一個屬性塊（display：block）元素中，然后設置父層元素屬性居中： .test { text-align:ce...

genedna 2019-08-02 15:27 評論0 收藏0