SOURCE

<!-- 水平居中 -->
<!-- 1.行内元素 -->
<div class="parent1">
	<span>son1 行内元素</span>
</div>

<!-- 块级元素 -->
<!-- <div class="parent2"> -->
    <div class="son2">son2 块级元素</div>
<!-- </div> -->

<!-- 块级元素-子元素float -->
<div class="parent3">
    <div class="son3">son3 子元素浮动 </div>
</div>

<br/>

<!-- flex -->
<div class="parent4">
    <div>son4 flex</div>
</div>

<!-- box -->
<div class="parent5">
    <div>son5 box</div>
</div>


<!-- 绝对定位-transform -->
<div class="parent6">
    <div class="son6">son6 绝对定位-transform</div>
</div>

<br/>

<!-- 绝对定位-margin -->
<div class="parent7">
    <div class="son7">son7 绝对定位-margin</div>
</div>

<br/>

<div class="parent8">
    <div class="son8">son8 绝对定位-left+top+right+bottom+margin 水平垂直居中</div>
</div>

.parent1 {
    text-align: center
}

.son2 {
    width: fit-content;
    margin: 0 auto;
    background: red;
}

.parent3 {
    width: fit-content;
    margin: 0 auto
}

.son3 {
    float: left
}

.parent4 {
    display: flex;
    justify-content: center
}

.parent5 {
    display: box;
    box-orient: horizontal;
    box-pack: center;
    background: red;
}

.son6 {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    // 如果知道子元素宽度
    // width:宽度;
    //  margin-left: -0.5*宽度
}

.son7 {
    position: absolute;
    width: fit-content;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.son8 {
    position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
    width: fit-content;
    height: fit-content;
	background: red;
}