Center an element horizontally and vertically

Method 1 : We know the width and height of this element

 .div1 {
       background-color: blue;
       width: 100px;
       height: 100px;
       /* <!-- Turn elements into positioning elements --> */
       position: absolute;
       /* <!-- Set the location of the element , Distance 、 Zuo Duwei 50%--> */
       left: 50%;
       top: 50%;
       /* <!-- Set the left outer margin of the element 、 The upper and outer margins are negative for width and height 1/2--> */
       margin-left: -50px;
       margin-top: -50px;
     }

Method 2 : Use transform

.div1 {
        background-color: blue;
        width: 100px;
        height: 100px;
        /* <!-- Turn elements into positioning elements --> */
        position: absolute;
        /* <!-- Set the location of the element , Distance 、 Zuo Duwei 50%--> */
        left: 50%;
        top: 50%;
        /* <!-- Set the element's offset from itself to be negative 50%( That's half the size of the element itself )--> */
        transform:translate(-50%,-50%);
      }
   

shortcoming : Poor compatibility , Can only support IE9+ Browser

Method 3 : margin:auto

Parent element Settings position: relative;
Subelement :

  .div1 {
        background-color: blue;
        width: 100px;
        height: 100px;
        /* <!-- Turn elements into positioning elements --> */
        position: absolute;
        /* <!-- Set the location of the element , Distance 、 The bottom left and right are 0--> */
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
        /* <!-- Set the element's offset from itself to be negative 50%( That's half the size of the element itself )--> */
       margin: auto;
      }

shortcoming : I won't support it IE7 Next browser

Method four : Elastic layout flex

Add... To the parent element :

  .div0 {
        border: 1px solid #000;
        width: 300px;
        height: 230px;
        /* position: relative; */
        display: flex;
        justify-content: center;
        align-items: center;
      }