html中盒子居中方法

方法一:flex布局

            /* 弹性容器*/
            display: flex;
             /* 主轴居中 */
            justify-content: center;
             /* 侧轴居中 */
            align-items: center;复制

缺点:盒子无法覆盖其他标准流

方法二:用magin和padding将盒子挤到中心 

方法三：margin+定位(子绝父相)

 
            background-color: pink;
            position: absolute;
            left: 50%;
            top:50%；
            margin-left:-100px;
            margin-top:-50px;
            width:200px;
            height:100px;复制

缺点:盒子的宽高要固定

方法四:定位+margin实现

            position: absolute;
            left: 0;
            top:0;
            bottom: 0;
            right: 0;
            /* 脱离了标准流，margin自适应可以垂直居中、 */
            margin: auto;
            width: 12.5rem;
            height: 6.25rem;
            background-color: pink;复制

方法五:位移+居中(推荐)

原理:位移取值为百分比数值,参考盒子自身尺寸计算移动距离

            width:200px;
            height:100px;
            background-color: pink;
            position: absolute;
            left: 50%;
            top:50%；
            /* 位移+定位（子绝父相）推荐写法 */
            transform: translate(-50%,-50%);复制