本案例记录的是前端中容器居中的案例
margin:0 auto 已经可以实现子元素水平居中于父容器中。
方式1:定位子绝父相
<div style="height: 100px;width:200px;background: lime;position: relative">
<div id="center_method_one">
<p>子布局</p>
</div>
</div>
css样式,设置子布局绝对定位,距离左上父亲布局的一半,然后向左上移动自身的一半即可
#center_method_one{
background-color: red;
position: absolute;
margin: auto;
width: 70px;
top:50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
方式2:使用flex
.father{
margin-top: 60px;
background-color: lime;
width: 100px;