<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<style>
/*1.利用位置计算，父元素相对定位，子元素绝对定位。涉及的知识很基础，但是有点麻烦*/
/*.box{
height: 400px;
width: 400px;
position: relative;
background-color: red;
}
.con{
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
margin: 50% 0 0 50%;
left: -50px;
top: -50px;
}*/
/*2.利用CSS3的transform，子元素相对定位，向上移动自身的一半*/
/*.box{
height: 400px;
width: 400px;
background-color: red;
}
.con{
height: 100px;
width: 100px;
background-color: blue;
position: relative;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}*/
/*3.利用flex布局，简单粗暴,只需对父元素操作*/
.box{
height: 400px;
width: 400px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.con{
height: 100px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="con"></div>
</div>
</body>
</html>
这个：
垂直居中