首先我们给定基本的页面解构，给上基本的样式，以便我们清除的看到父元素和子元素的初始位置。
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent{
width: 300px;
height: 300px;
background-color: aqua;
}
.child{
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
下面是初始状态，目前子元素是在父元素左上角
下面我们通过几种思路来实现：
第一种 (通过弹性布局的方式) :
通过给父元素设置弹性布局，让它变成一个容器，再利用---主轴对齐方式justify-content和交叉轴对齐方式align-items，即可实现，代码如下
.parent{
width: 300px;
height: 300px;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
第二种 （通过定位的方式）：
1.设置子元素为绝对定位，但记得要给父元素一个定位属性，以便子元素参考父元素的位置做移动。
.child{
position: absolute;
}
.parent{
position: relative;/*设置父元素为相对定位*/
}
2.使子元素向右向下偏移父元素宽度、高度的50%
.child{
left: 50%;
top:50%;
}
3.由于子元素本身的宽高，所以此时子元素的中心并不是处于父元素中心的位置。
.child{
transform: translate(-50%,-50%);
/* 使得子元素再向左、向上移动自身宽高的50% */
}
下面是完整的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 300px;
height: 300px;
background-color: aqua;
position: relative;/*设置父元素为相对定位*/
}
.child{
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
/*设置子元素为绝对定位，但记得要给父元素一个定位属性，以便子元素参考父元素的位置做移动*/
left: 50%;/*使子元素向右偏移父元素宽度的50%*/
top:50%;/*使子元素向下偏移父元素宽度的50%*/
/* 由于子元素本身的宽高，所以这是子元素的中心并不是处于父元素中心的位置 */
transform: translate(-50%,-50%);
/* 使得子元素再向左、向上移动自身宽高的50% */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
第三种（利用margin的方法）：
.parent{
width: 300px;
height: 300px;
background-color: aqua;
position: relative
}
.child{
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
margin:auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
这里记得我们还是保留一下子父元素的定位设置
以上是几种垂直水平居中的方式，当然方法肯定不仅这些，如果大家有其他好的方式的话，欢迎留言。
