html-定位实现盒子的水平绝对居中的3种方式--小技巧

方法一：margin负间距

必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
距离定位父级左边框和上边框的距离设置为50%；
将元素分别左移和上移，移动元素宽度和高度的一半

方法二：margin: auto；实现绝对定位元素的居中

必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
分别设置left: 0; right: 0; top: 0; bottom: 0;
为居中盒设置margin: auto;

方法三：transform: translate();实现绝对定位元素的居中

    .box{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

实现代码

效果截图