假设html元素为下面这样,父容器和子容器的宽高均为不确定
<div class="parent">
<div class="child">Demo</div>
</div>
下面四种方案对其水平居中
方案一： test-align+inline-block
.parent{
text-align: center;
}
.child{
display: inline-block;
}
优点：兼容性好；
缺点：text-align: center;会被child元素继承下来，需要额外的代码来修复.
方案二 margin+table
.child{
display: table;
margin:0 auto;
}
优点:只对child元素进行处理.
方案三 absolute+transform
.parent{
position: relative;
}
.child{
position: absolute;
left:50%;
transform: translateX(-50%);//参照物为自身
}
优点：脱离文档流，不会对其他元素产生影响；缺点：兼容性差.
方案四 flex+justify—content
.parent{
display: flex;
justify-content: center;
}
优点：只对parent元素进行设置
