一、div居中水平居中

1.給元素指定寬度，然後外邊距左右自動居中

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

2.inline-block實現水平居中方法

        要在元素的父容器中設定text-align的屬性為“center“

.parent{
     text-align: center; 
 }

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

        缺點：需要額外處理inline-block的瀏覽器相容性。

3.浮動實現水平居中的方法

        需要定好所佔父級的百分比，從而實現句中效果

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

          position: relative;

4.CSS3的flex實現水平居中方法

  display: flex; 

   justify-content:center; 

5.fit-content

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