CSS 水平居中

零散的知识不整理进入自己的知识框架太容易忘，对于CSS脑子里零零散散的！整理自勉！

水平居中

块级元素水平居中

margin：auto

此居中的方法前提为居中块级元素宽度必须固定才可设置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>

可见块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;
    }
<div class="block1">
    <div class="block2">11111111111</div>
</div>

特点：扩展性强，但需要额外处理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;
    }
 <div class="block1">
    <div class="block2"></div>
 </div>

特点： 必须知道子元素的宽度才能设置左边补白的负值
注：网上有说法可以通过和float来实现不定宽度块级元素居中（还未深究）

CSS3 flex实现水平居中方法

Flex主要用来布局！ Flex布局，可以简便、完整、响应式地实现各种页面布局。后面整理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>

特点：实现便捷，扩展性强但兼容需要考虑

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

特点：扩展性强，但兼容性差;

float

浮动居中有待好好研究！
特点：兼容性强，扩展性强！但实现原理较复杂