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

水平居中

塊級元素水平居中

margin：auto

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

   .block1{
        height: 300px;
        width: 600px;
        background: black;
    }
    
    .block2{
        height: 100px;
        width: 100px;
        margin: auto;
        background: red;
    }
 <div class="block1">
    <div class="block2"></div>
 </div>

image.png

text-align:center

text-align 屬性規(guī)定元素中的文本的水平對齊方式冬耿！顯然不是用來給塊級元素水平居中的，不過可設(shè)置塊級元素為行內(nèi)塊級元素時便可實現(xiàn)水平居中

 .block1 {
        height: 300px;
        width: 600px;
        background: black;
        text-align: center;
    }
    
    .block2 {
        height: 100px;
        display: inline-block;
        background: red;
    }
<div class="block1">
    <div class="block2">11111111111</div>
</div>

image.png

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

position:absolute

通過設(shè)置子元素為絕對定位元素還有l(wèi)eft和margin-left的值可以達(dá)到居中效果

 .block1 {
        height: 300px;
        width: 600px;
        position: relative;
        background: black;
    }
    
    .block2 {
        height: 100px;
        width: 100px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        background: red;
    }
 <div class="block1">
    <div class="block2"></div>
 </div>

image.png

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

CSS3 flex實現(xiàn)水平居中方法

Flex主要用來布局淆党！ Flex布局，可以簡便讶凉、完整、響應(yīng)式地實現(xiàn)各種頁面布局山孔。后面整理flex布局筆記懂讯！

  .block1 {
        height: 300px;
        width: 600px;
        display: flex;
        justify-content: center;
        background: black;
    }
    
    .block2 {
        height: 100px;
        background: red;
    }
  <div class="block1">
    <div class="block2">1123123</div>
 </div>

image.png

特點：實現(xiàn)便捷，擴展性強但兼容需要考慮

CSS3 width:fit-content

width:fit-content可以實現(xiàn)元素收縮效果的同時台颠，保持原本的block水平狀態(tài)褐望，于是，就可以直接使用margin:auto實現(xiàn)元素向內(nèi)自適應(yīng)同時的居中效果了

  .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;
    }
 <div class="block1">
    <div class="block2">1123123</div>
 </div>

image.png

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

float

浮動居中有待好好研究瘫里！
特點：兼容性強，擴展性強荡碾！但實現(xiàn)原理較復(fù)雜