1.利用margin与定位

设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中；

2.利用table-cell

将父盒子设置为table-cell(能够使元素呈单元格的样式显示)，并设置text-align: center(使内容水平居中)；vertical-align:middle(使内容垂直居中);。子盒子设置为inline-block可以使其内容变为文本格式，也可设置宽高；此方法父级需设置指定高度和宽度，负责无效

3.利用flex弹性盒子

详解：

使用弹性盒子的时候需要给父级设置display:flex;

在父元素上设置水平justify-content:center;与垂直align-items:center;方向上的排列方式即可

4.利用定位+位移

详解：

利用定位将子级进行向右下方向进行"驱逐"，使子级的左上角那一点相对于父级居中，然后使用transform(相对于自身的位移)进行反向位移

5.利用定位+margin(宽高的一半)

详解：

利用定位将盒子挤向右下方，再利用margin进行反向回推。

(原理和定位+位移的方法如同一辙)

打开前端开发工具，新建一个html代码页面

在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"

设置背景图片。创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

回到html代码页面，在bg-img类里添加background-position: center的样式。

保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

将图像水平居中的方法是使用display：flex。

同样，我们对容器使用text-align属性，它也会使用display：flex。但是，仅使用display：flex是不够的。容器还必须具有一个称为justify-content的附加属性。