css中几种常见的居中方式

直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
{
margin: 0;
padding: 0;
}
/水平居中 margin : 0 auto; */
.box{
width: 300px;
height: 300px;
border: 2px solid red;
}
.img1{
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}

1.0.jpg

  /*水平垂直居中*/
  .box2{
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid blue;
    background: yellow;
  }
  .img2{
      width: 100px;
      height: 100px;
      position: absolute;
      top:50%;
      left:50%;
      margin-left: -50px;
      margin-top: -50px;
   }

2.0.jpg

       /*水平垂直居中  2   */
   .box3{
     width: 300px;
     height: 300px;
     position: relative;
     border: 1px solid blue;
   }
   .img3{
       width: 100px;
       height: 100px;
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       margin: auto;
    }

3.0.jpg

       /*水平垂直居中  3   css3新属性 */
    .box4{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid blue;
    }
    .img4{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
     }

4.0.jpg

     /* table-cell  将其变为表格 */
     .box5{
       width: 300px;
       height: 300px;
       display: table-cell;
       vertical-align: middle;
       text-align: center;
       border: 1px solid blue;
     }
     .img5{
         width: 100px;
         height: 100px;
      }

5.0.jpg

      /* flex布局完成 */
      .box6{
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid blue;
      }
      .img6{
          width: 100px;
          height: 100px;
       }