css实现不定宽元素居中

使用网格盒子模型：
在父容器中加上display:grid
在被居中元素加上margin:auto

使用弹性盒子模型：
在父容器加上display:flex
在被居中的元素加上margin:auto

使用绝对定位：
在父容器加上相对定位position:relative
在被居中元素加上绝对定位position:absolute
设置元素left,top为50%,加上transform:translate(-50%,-50%) //这里的50%为子元素的50%
OR设置子元素的left,top,bottom,right均为0，然后margin:auto;

使用伪元素支撑：
给父容器添加伪元素after、before,并设置其为内联块元素dispaly:inline-block,高度为100%,垂直居中vertical-align: middle;设置父容器内容水平居中text-align:center.
设置子元素为内联块元素display:inline-block,且垂直居中vertical-align: middle;