可以实现css水平垂直居中的方式

1.可以利用绝对布局来进行实现，

.parent {
    
    
	position: relative;
}
.children {
    
    
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

这样子的写法可以实现chlidren类下的内容水平垂直居中，但是如果children类对应的是img标签的话，可能会出现这种情况，在图片路径找不到的时候，高度会被拉长
2.利用table布局的方式

.parent {
    
    
	display: table;
}
.children {
    
    
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

如果children下的内容是img的话，需要在img中添加margin:auto（自己测试的，如果有误望指出）
如果children下的内容不是img的话，则不需要。
3.

.parent {
    
    
	position: relative;
}
.children {
    
    
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

该方法存在兼容问题，慎用
4.flex布局

.children {
    
    
	display: flex;
	align-items: center;
	justify-content: center;
}