1. It can be realized by using absolute layout,
.parent {
position: relative;
}
.children {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This writing method can realize the horizontal and vertical centering of the content under the chlidren class, but if the children class corresponds to the img tag, this situation may occur. When the image path cannot be found, the height will be elongated 
2. Use table layout
.parent {
display: table;
}
.children {
display: table-cell;
text-align: center;
vertical-align: middle;
}
If the content under children is img, you need to add margin:auto to the img (tested by yourself, if you misunderstand it),
if the content under children is not img, you don't need it.
3.
.parent {
position: relative;
}
.children {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
This method has compatibility issues, so use
4.flex layout with caution
.children {
display: flex;
align-items: center;
justify-content: center;
}