SOURCE

<div class='block-ele'>一般块级元素自身设置margin:0 auto</div>
<div class='inline-parent'><span>一般行内元素父元素设置text-align:center</span></div>
<div class='float-parent'><div>子元素是浮动元素</div></div>
<div class='flex'><div>flex</div></div>
<div class='transform'>transform</div>
<div class='absolute'>absolute</div>
<div class='absolute1'>absolute</div>

*{
  color:#fff;
}
div{
  border:1px solid #e2e;
  height:50px;
  width:200px;
}
.block-ele{
  margin:0 auto;

}
.inline-parent{
  width:100%;
  text-align:center;
}
/*父子元素宽度都成为子元素的宽度,父子都居中*/
.float-parent{
  width:fit-content;
  margin:0 auto;
}
.float-parent div{
  height:20px;
  float:left;
}
.flex{
  display:flex;
  justify-content:center;
}
.flex div{
  width:50px;
}
.transform{
  position:absolute;
  left:50%;
  transform:(-50%,0);
  margin-left:-100px;
}
.absolute{
  margin-top:60px;
  position:absolute;
  left:50%;
  margin-left:-100px;
}
.absolute1{
  position:absolute;
  left:0;
  right:0;
  margin:120px auto 0 auto;
}