css 盒子水平居中（确定宽度和不确定宽度）

说到让一个div水平居中，立马想到最常用的就是margin:0 auto;但是这个的前提是必须知道盒子的宽度，盒子居中主要有两种情况：

一.确定盒子的宽度，解决办法有：

1.1 margin:0 auto;

1.2   position:relative;left:50%;margin-left:-0.5*width;(用绝对定位也可以)

二.不确定盒子宽度的，而且盒子宽度可变的，方法如下

2.1 position:relative:left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);//这里的50%是指盒子本身的50%;

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