在这里，我将其分为定位元素固定宽高和不固定宽高两类。
为了便于理解，我先写点公共的样式：
css：
.size是我所设的定位元素的宽高。下面开始介绍
一、固定宽高
html：
css：
1。
这种方法是给父元素设置相对定位，给子元素设置绝对定位 ，并在 top 和 left 方向上移动父元素50%的距离。因为子元素移动是以盒子左上角为基点移动的。所以还应该移动它本身宽高的一半。这里是用margin外边距来移动的，当然也就有了第二种方法 用calc来完成：
2。
calc是css3里新增计算属性，和上面方法原理是一样的。
3。
css：
这种方法同样使用绝对定位，但四个方向的偏移量全都为0，使用margin:auto 分配剩余空间。
二、未知宽高
html：
如图，定位元素（子元素）是没有size属性的，即其宽高是未知的。
4。
css：
这里的transform: translate(-50%, -50%);相当于上面的margin-top和margin-left。transorm、translate是css3新增属性，它是可以设置百分比的。相对于它自身的宽高。所以在子元素宽高未知时，设置-50%仍然居中。
5。
css：
这种方法是用弹性盒来实现的，其中justify-content: center;主轴居中，align-items: center;使侧轴居中。弹性盒多用于移动端。
6。
css：
这种方法是运用表格属性的水平垂直居中方法来实现的。只不过不太常用。
