首先编写一个简单的html代码，设置一个父div类名为boxFather，再设置一个子div类名为box1。html代码如下：
<div class="boxFather">
<div class="box1"></div>
</div>
下面使用div盒子里面要有内容撑开，html代码如下：
<div class="boxFather">
<div class="box1">
测试内容
</div>
</div>
1.div居中的方法
(1)父div不定宽高，子div定宽高
第一种方式：
<style>
.box1{
background-color: red;
width: 300px;
height: 200px;
margin: 0 auto;
}
</style>
第二种方式：
<style>
.boxFather{
position: relative;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform:translate(-50%) ;
transform:translate(-50%);
}
</style>
第三种方式：
<style>
.boxFather{
display: flex;
justify-content: center;
}
.box1{
background-color: red;
width: 300px;
height: 200px;
}
</style>
第四种方法：
<style>
.boxFather{
text-align: center;
}
.box1{
display: inline-block;
background-color: red;
width: 300px;
height: 200px;
}
</style>
第五种方法：
<style>
.boxFather{
position: relative;
}
.box1{
position: absolute;
left:;
top:;
right:;
bottom:;
margin:auto;
background-color: red;
width: 300px;
height: 200px;
}
</style>
第六种：
<style>
.boxFather{
position: relative;
}
.box1{
position: absolute;
left:50%;
top:50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
background-color: red; }
</style>
第七种：
<style>
.boxFather{
display: flex;
justify-content:center;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
} </style>
(2)父div不定宽高，子div不定宽高 。（注意div盒子里面要有内容撑开）
第一种方法：
<style>
.boxFather{
position: relative;
}
.box1{
background-color: red;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform:translate(-50%) ;
transform:translate(-50%);
}
</style>
第二种方法：
<style>
.boxFather{
display: flex;
justify-content:center;
}
.box1{
background-color: red;
}
</style>
2.div垂直居中
（1）父div不定宽高，子div不定宽高
第一种方法：
<style>
.boxFather{
display: flex;
justify-content:center;
align-items: center;
height: 200px;
border:1px solid #ccc;
}
.box1{
background-color: red;
}
</style>
（2）父div定高，子div定宽高
第一种方法：
<style>
.boxFather{
position: relative;
height: 500px;
border:1px solid #ccc;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform:translate(-50%,-50%) ;
transform:translate(-50%,-50%);
}
</style>
第二种方法：
<style>
.boxFather{ }
.box1{
position: fixed;
left:;
top:;
right:;
bottom:;
margin:auto;
background-color: red;
width: 300px;
height: 200px;
}
</style>
（3）父div定宽高，子div不定宽高（需要内容撑开）
第一种方法：
<style>
.boxFather{
width: 300px;
height: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box1{
display: inline-block;
} </style>
第二种方法：
<style>
.boxFather{
display: flex;
justify-content:center;
align-items: center;
height: 200px;
border:1px solid #ccc;
}
.box1{
background-color: red;
}
</style>
3.div垂直
文字垂直，html代码如下：
<div class="boxFather">
测试内容
</div>
第一种方法：
.boxFather{
height: 100px;
line-height: 100px;
background-color: red;
border: 1px solid #ccc;
}
第二种方法：
.boxFather{
height: 100px;
background-color: red;
display:table-cell;
vertical-align:middle;
}
div垂直的内容可复用‘div垂直居中’的内容是内容垂直
记录一下，以后还会陆续添加。