1. 水平居中
1.1. 总览
如果是水平居中的话，首先我们得看这个元素（标签）是块级元素还是行内级元素。
块级元素：默认情况下，块级元素会独占一行，宽度会自动填满父元素的宽度，比如div，p，h，ul等。
行内级元素：行内级元素不会独占一行，宽度是由内容所撑开的，多个行内级元素可以并排显示，如a，span，img。
常见的水平居中方式：
- 块级元素（必须设置有宽度）：margin:0 auto;
- 行内级元素：设置父元素的text-align:center；
- flex布局：justify-cotent:center;
- 绝对定位：元素有宽度的情况下，left:0/right:0/margin:0 auto;
1.2. margin:0 auto
这种居中方式有两个注意事项:
- 必须是块级元素
- 块级元素必须有宽度
<style>
.container {
width: 300px;
height: 300px;
background-color: pink;
}
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: orange;
}
</style>
<div class="container">
<div class="box"></div>
</div>
<style>
.container {
width: 300px;
height: 300px;
background-color: pink;
}
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: orange;
}
</style>
<div class="container">
<div class="box"></div>
</div>
Q：为什么会出现这种情况呢？
A：因为块级元素的宽度默认是占满父级的，不设置宽度时候自然呈现这种状况。我们再来分析一下margin:0 auto为什么可以实现居中。
当块级元素的设置了宽度，占不满父级的时候，仍然是会独占一行的。
<style>
.container {
width: 300px;
height: 300px;
background-color: pink;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<div class="container">
<div class="box"></div>
你好啊
</div>
我们可以看到即使块级元素设置了宽度占不满父级的宽度时候，别的元素也会不会挤进来。而margin：0 auto 其实就相当于 margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto; 那么margin-left 和 margin-right 就会平分所剩下的外边距，于是就把块级元素挤到中间去了。
1.3. text-align:center
<style>
.father {
width: 300px;
height: 300px;
/* 给父级设置上text-align:center */
text-align: center;
background-color: pink;
}
</style>
<div class="father">
<p class="son">我是儿子</p>
</div>
下面这个跟上面有什么区别，下面的子元素是div元素，上面的子元素是p元素，只不过下面的子元素div转换了显示模式inline-block。
补充一个知识点：所有的元素本质上都是一样的，只不过是它们的样式不同的。比如说可以通过display来转换显示模式，块级元素也可以转成行内级元素，同理，给div添加上合适的样式，也能起到任意元素的效果，比如a元素，比如img元素等等。
<style>
.father {
width: 300px;
height: 300px;
/* 给父级设置上text-align:center */
text-align: center;
background-color: pink;
}
.son {
display: inline-block;
background-color: orange;
}
</style>
<div class="father">
<div class="son">我是子元素</div>
</div>
1.4. justify-content:center
第三种方式是flex布局结合justify-cotent:center实现居中，flex布局在开发中经常使用，就不再详细说了。这个方式无论是子级元素是块级元素还是行内级都可以使用。
<style>
.father {
/* 是给父级设置flex布局,别设错了 */
display: flex;
justify-content: center;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
/* 无论是块级元素还是行内级元素都可以 */
/* display: inline-block; */
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<div class="father">
<div class="son">我是子元素</div>
</div>
1.5. 绝对定位
绝对定位，在元素有宽度的情况下，配置以下属性一起使用 left:0/right:0/margin:auto 可以实现居中。
补充小知识：绝对定位是找到最近定位的祖先元素，并不是找到相对定位元素。因为我们说子绝父相，子绝父相，并不意思父级一定要是相对定位，父级是绝对定位或者固定定位都是可以的，所以不止是子绝父相，子绝父绝，子绝父固也是可以的。只要这个父级是定了位的就可以，然后这个父级是广义上的父级，就比如是它的爷爷，曾爷爷等等，只要是它的祖先元素就可以。如果找不到定位的祖先元素的话，最后就会根据浏览器来进行参照。（如果有需要关于定位的文章的话，之后也可以出一篇对应的文章梳理不同定位的细节和区别）
为什么便于大家好理解，在这里就采用常见的子绝父相了。使用绝对定位的实现的居中方式，无论子元素是块级元素还是行内级元素都是可以实现居中的。
<style>
.father {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
position: absolute;
left: 0;
right: 0;
width: 100px;
height: 100px;
margin: 0 auto;
background-color: orange;
}
</style>
<div class="father">
<div class="son">我是子元素</div>
</div>
下面我们来分析一下为什么这种方式可以居中呢？
子绝父相就不再多说，left:0和right:0 其实就是让子元素占满父级的宽度，如果子元素不设置宽度的话，那么子元素的宽度默认值为auto，就占满了父级。
<style>
.father {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
position: absolute;
left: 0;
right: 0;
/* width: 100px; */
height: 100px;
margin: 0 auto;
background-color: orange;
}
</style>
<div class="father">
<div class="son">我是子元素</div>
</div>
如果给子元素宽度的话，那么它就不会占满父级了，然后通过marigin:0 auto 就可以实现居中了。这种方式的原理其实跟第一种方式直接块级元素margin:0 auto 很像。其实left:0,right:0 就有点像模拟了块级元素，即使宽度占不满父级宽度，其他元素也不会占据那行的位置，然后通过marigin: 0 auto 来使左右间距平局分让盒子挤到中间去。
1.6. 总结
最后，我们回顾一下这四种常见的水平居中的方式。
- 块级元素（必须设置有宽度）：margin:0 auto;
- 行内级元素：设置父元素的text-align:center；
- flex布局：justify-cotent:center;
- 绝对定位：元素有宽度的情况下，left:0/right:0/margin:0 auto;
