首先编写一个简单的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;}