CSS盒子居中的常用的几种方法(小结)
版权申诉
5星 · 超过95%的资源 64 浏览量
2020-11-21
14:52:08
上传
评论
收藏 23KB PDF 举报 
CSS盒子居中的常用的几种方法盒子居中的常用的几种方法(小结小结)
第一种：第一种：
用css的position属性
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
position: relative;
}
.div2 {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<div class="div1">
<div class="div2 ">
</div>
</div>
效果图：
第二种：第二种：
利用css3的新增属性table-cell, vertical-align:middle;
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
.div2 {
width: 40px;
height: 40px;
background-color: red;
margin: auto;
}
</style>
<div class="div1">
<div class="div2">
</div>
</div>
- 1
- 2
前往页