首先编写一个简单的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>
第三种方式: