第一种：利用定位
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
思路：父级相对定位，子级绝对定位 四个定位属性的值都设置0；如果子级没有设置宽高，则会和父级一样宽高。如果子级设置了的宽高，则会按照实际设置来显示；但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto就可以上下左右都居中了
第二种，定位配合css3位移
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
思路：父级相对定位，子级绝对定位，给子级的top，left两个属性设置百分比；这个百分比是相对于父级的宽高来进行计算的；如果只给定这两个值，则子级的右上角会和父级的中心点对齐，然后利用css3中的位移属性把自身再往左上角各移动50%就可以让子级在父级中上下左右都居中了
第三种，利用内联块元素 display:inline-block
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
text-align: center;
}
.content:before{
content: '';
height:100%;
width:0;
display: inline-block;
vertical-align: middle;
}
.box{
width:100px;
height:40px;
background: #f0a238;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
思路：首先，把子级转换成内联块元素，可以利用text-align:center实现左右居中，而这个方法难点就在上下居中上。子级是一个内联块元素，给父级设置一个行高子级无法上下居中。所以需要更加复杂的操作： 给子级设置垂直对齐方式：vartical-align 这个属性只对内联元素以及内联块元素起作用；它有这么些值：top,bottom,middle;这个属性需要一个参照物，如果父级里面有两个子元素（利用伪元素before生成一个参照物），两个子元素都设置了vertical-align:middle，那么得到的效果只是这两个元素之间居中对齐而已。并不会把两个子元素都放在父级的中间。把其中一个元素设置高度百分百，那么这时候另一个元素就会处于父级上下居中的位置了。
第四种，弹性盒模型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
思路：css3语法
第五种，网格布局 Grid
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: grid;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
思路：css3语法
