居中方法

盒子居中方法

1.配合transform 的方法（有浏览器要求）

<div class="parent">
        <div class="child"></div>
    </div>

.parent{
            width: 500px;
            height: 500px;
            background-color: lawngreen;
            position: relative;
        }
        .child{
            width: 50px;
            height: 50px;
            background-color: lightsalmon;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

2.使用margin自适应

        .parent{
            width: 500px;
            height: 500px;
            background-color: lawngreen;
            position: relative;
        }
        .child{
            width: 50px;
            height: 50px;
            background-color: lightsalmon;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:auto;
		}

效果图和上面一样，缺点就是父级盒子内设置margin会有影响