5、利用弹性布局 与 margin：
<style>
.container{
height: 600px;
width: 600px;
border:1px solid black;
display: flex;
}
.box{
width: 200px;
height: 100px;
background-color: blue;
margin: auto;
}
</style>
<div class="container">
<div class="box"></div>
</div>
1,子div先充满父元素,在margin:auto,
2,先相对于父元素margin平移,再回拉法,
3,利用表单单元格td特有属性,vertical-align,使子div垂直居中,
再对子div设置水平居中.
4、弹性布局，通过定义伸缩容器的两个属性，justify-content主轴方向，align-items纵轴方向均为center
——————（补充）
个人比较喜欢第一种和第四种方法,既简单,又不用计算
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.d-1{
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
border: 1px solid black;
}
.d-2{
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left:0;top: 0;right: 0;bottom: 0;
margin: auto; }
.d-3{
width: 100px;
height: 100px;
border: 1px solid blue;
position: absolute;
left:50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.d-4{
width: 100px;
height: 100px;
border: 1px solid blue; /*让标签元素以表格单元格形式呈现，类似于td标签，主要是利用它的特殊属性：
元素垂直居中对齐，但其会被float、position:absolute、
所以尽量不要与其同用，设置了display：table-cell的元素对宽度高度敏感，
对margin值无反应，所以页面上出现在了左边，我就不想再在外面加调了哈，
但会响应padding属性，基本和td标签无异*/
display: table-cell;
vertical-align:middle;
}
.d-5{
width: 50px;
height: 50px;
background: blue;
margin:0 auto;
} </style>
</head>
<body>
<div class="d-1">
<div class="d-2">
<div class="d-3"> </div>
</div>
</div> <div class="d-4">
<div class="d-5"></div>
</div>
</body> </html>
运行结果:
4、弹性布局，通过定义伸缩容器的两个属性，justify-content主轴方向，align-items纵轴方向均为center
<style>
.container{
height: 600px;
width: 600px;
border:1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 200px;
height: 100px;
background-color: blue;
} </style> <div class="container">
<div class="box"></div>
</div>
运行结果：
