零散的知识不整理进入自己的知识框架太容易忘，对于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>
image.png
可见块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>
image.png
特点：扩展性强，但需要额外处理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>
image.png
特点： 必须知道子元素的宽度才能设置左边补白的负值
注：网上有说法可以通过和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>
image.png
特点：实现便捷，扩展性强但兼容需要考虑
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>
image.png
特点：扩展性强，但兼容性差;
float
浮动居中有待好好研究！
特点：兼容性强，扩展性强！但实现原理较复杂
