translate实现CSS 垂直或水平方向居中

<div>
	<p>Sub Section</p>
</div>

CSS:

div {
position: relative; /*请为父级设定position为relative*/
height: 100px; /*请为父级设定高度*/
width: 100px; /*请为父级设定宽度*/
}
//水平垂直居中
p {
position: absolute; /*请将子级position设为absolute*/
top: 50%; /*使子级左上角位于中心点*/
left: 50%; /*使子级左上角位于中心点*/
transform: translate(-50%,-50%); /*从中心点向上和向左分别移动50%偏移量，中心点刚好与<p>中心重合*/
margin: 0; /*清除margin影响*/
}

效果：

若有多个子模块 各个模块只想水平居中 垂直方向叠加，那么：

<div>
	<img src="./1.png">
	<p>Sub Section</p>
</div>

/*父级CSS设置与上一情况一致无需修改*/
//水平居中
img {
position: absolute; /*请将子级position设为absolute*/
top: 5%; /*图像在上*/
left: 50%; /*使子级左上角位于水平中心点*/
transform: translate(-50%); /*从中心点向左移动50%偏移量，中心点刚好与水平中心重合*/
margin: 0; /*清除margin影响*/
}
p