About horizontal centering of html elements

1. Center the div horizontally

1. Specify the width of the element, and then automatically center the left and right margins

.center{
   width:100px;
   margin-left:auto;
   margin-right:auto;
  }

2. Inline-block implements horizontal centering method

        To set the text-align attribute to "center" in the element's parent container

.parent{
     text-align: center; 
 }

.parent li{
          display :  inline-block;
           display inline;
  }

        Disadvantages: Additional processing of inline-block browser compatibility is required.

3. Floating method to achieve horizontal centering

        It is necessary to determine the percentage of the parent to achieve the effect in the sentence

.parent{
     float: left;
     width:100%; 
     overflow: hidden;
     position: relative;
 }
.parent li{
           float: left;
            width:50%;

          position: relative;

}

4. CSS3 flex implements horizontal centering method

  display: flex; 

   justify-content:center; 

5. fit-content is a new attribute value added to the "width" attribute in CSS

 width: -moz-fit-content;
 width:-webkit-fit-content;
 width: fit-content;
 margin-left: auto;
 margin-right: auto;