css未知宽高元素水平垂直居中的方法

如下所示，子元素的尺寸是随机的。但是相对父元素上下左右是居中的。

公共代码

<div class="parent-box">
	<div class="child-box"></div>
</div>

.parent-box{
	width: ----;
	height: -----;
	border: --- ------ -------;
	box-sizing: ----------;
	border-radius: ----;
}
.parent-box .child-box{
	background: linear-gradient(-----, -------, -------);
	border-radius: ----;
}

弹性盒子

.parent-box{
	display: ----;
	justify-content: ------;
	align-items: ------;
}

相对定位

.parent-box{
	position: --------;
}

.parent-box .child-box{
	position: --------;
	left: ---;
	top: ---;
	transform: translate(----,----);
}

网格布局

.parent-box{
	display: ----;
	justify-content: ------;
	align-items: ------;
}

表格元素

.parent-box{
	display: ----------;
	text-align: ------;
	vertical-align: ------;
}

.parent-box .child-box{
	display: ------------;
}