关于html元素水平居中

一、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是CSS中给“width”属性新加的一个属性值

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