如何实现水平垂直居中？

 1、定位+外边距 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;

 2、定位+transform  盒子高宽已知，

                #container{ position:relative;  border:1px solid red;   width:800px;  height:600px; }

                #center{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);   }

   3、flex 布局

        父级：

            display: flex;

            align-items: center;

            justify-content: center;