嵌套的定位盒子如何居中？

<div class="father">
        <div class="son"></div>
</div>

<style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            position: relative;  
        }
        .son {
            width: 100px;
            height: 100px;
            background: rgb(133, 57, 57);
            margin: 0 auto;/* 没有效果 */
    </style>

问题：加了定位和浮动的盒子，子盒子用margin:0 auto;会失效
解决办法：
1.让子盒子水平居中：第一步子盒子先向左移动父盒子宽度的一半，第二步子盒子向右移动自身宽度的一半。
2.让子盒子垂直居中：第一步子盒子先向下移动父盒子高度的一半，子盒子向上移动自身高度的一半。

 .son {
            width: 100px;
            height: 100px;
            background: rgb(133, 57, 57);
            margin: 0 auto;/* 没有效果 */
            position: absolute;
            /* 让子盒子水平居中 */
            left: 50% ;/* 子盒子先向左移动父盒子宽度的一半 */
            margin-left: -50px;/* 子盒子向右移动自身宽度的一半 */
            /* 让子盒子垂直居中 */
            top: 50%;/* 子盒子先向下移动父盒子高度的一半 */
            margin-top: -50px;/* 子盒子向上移动自身高度的一半 */
        }

转载于:https://www.cnblogs.com/EricZLin/p/8745285.html