css绝对定位居中

绝对定位的盒子不能使用margin居中

left: 50%,整个盒子移动到浏览器中间偏右的位置，top: 50%,整个盒子移动到浏览器中间偏下的位置，二者合起来就是右偏下的位置，并不是我们要的中间位置，要想在中间的话我们需要向左宽度的一半margin-left:100px，向上高度的一半margin-top:100px， transform: translate(-50%,-50%);会自动计算宽度高度的一半，不需要每次更改盒子大小都需要更改margin-left和margin-top

    <style>
        .box{
            position: absolute;
            /* left: 50%,整个盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* top: 50%,整个盒子移动到浏览器中间偏下的位置 */
            top: 50%;
            /* 会自动计算盒子的宽度高度一半 */
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <div class="box"></div>