css的一些小技巧（持续更新中）

1. div区中的技巧

• 方法一

.parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          position:relative;
      }
      .child {
          width:300px;
          height:200px;
          margin:auto;
          position:absolute;
/*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/
          left:50%;
          top:50%;
          margin-left: -150px;
          margin-top:-100px;
          background-color: antiquewhite; }

• 方法二

.parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          display:flex;
          justify-content:center;
          align-items:center;
      }
      .child {
          width:200px;
          height:200px;
          background-color: antiquewhite;
      }

• 方法三

 .parent {
        width:800px;
        height:500px;
        border:2px solid #000;
        position:relative;
}
.child {
          width:200px;
          height:200px;
          margin: auto;  
          position: absolute;  
          top: 0; left: 0; bottom: 0; right: 0; 
          background-color: antiquewhite;
}