一个元素如何在父元素内水平垂直居中

几种常见的快速实现居中的方法

一、已知父子元素宽高

1. margin 方法 此方法简单粗暴，完美居中

代码如下

/*css 样式*/ 
       .wrap1{
            height: 200px;
            background: rgb(134, 211, 241);
            overflow: hidden; /* 触发BFC 解决margin塌陷*/
        }
        .box1{
            width: 100px;
            height: 100px;
            background: rgb(255, 255, 255);
            margin: 0 auto;
            margin-top: 50px;
        }
/*html 结构 以下栗子