首先编写一个简单的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:0;top:0;right:0;bottom:0;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:0;top:0;right:0;bottom:0;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;}
如果觉得《纯css使div垂直居中 div垂直 div居中的方法》对你有帮助，请点赞、收藏，并留下你的观点哦！
