CSS 水平居中写法汇总

确定盒子的宽度，比如 width:600px

1. 最常用的就是给父元素加上以下属性

   margin:0 auto
   

2. 一般将父元素的 position 设置为 relative，居中的子元素就可以设置为

   position:absolute;
   left:50%;
   margin-left:-300px; 
   /* 元素会从元素的左边向右50%，然后再减去元素本身的一半宽，就是正中间了 */
   

盒子宽度没有确定 

1. 一般将父元素的 position 设置为 relative，居中的子元素就可以设置为

   position:absolute; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%);

    2. 使用 fit-content

width:fit-content;
width:-moz-fit-content;
width:-webket-fit-content;
margin:auto;