css如何实现盒子上下左右居中

flex布局

		    display: flex;
            justify-content: center; //左右居中
            align-items:center //上下居中

定位加margin

父盒子设置positiob:relative
子盒子:position:absolute
			left:0
			top:0
			right:0
			bottom:0
			margin:auto

定位加tanslate

       .box{
            width: 300px;
            height: 300px;
            background: black;
            position: relative;
       }
       .a{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
       }