第一种：
用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>
效果：
第三种：
利用flexbox布局
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
display: flex;
/*!*flex-direction: column;*!可写可不写*/
justify-content: center;
align-items: center;
}
.div2 {
height: 40px;
width: 40px;
background-color: red;
}
</style>
<div class="div1 ">
<div class="div2 ">
</div>
</div>
效果：
第四种：
利用transform的属性（缺点：需要支持Html5）
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
position: relative;
}
.div2 {
height: 40px;
width: 40px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="div1 ">
<div class="div2 ">
</div>
</div>
效果图：
到此这篇关于CSS盒子居中的常用的几种方法(小结)的文章就介绍到这了,更多相关CSS盒子居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
设计师们都有自己的字体库，让他们在设计项目的时候能够得心应手。今天这篇文章...
"Code tailor"，为前端开发者提供技术相关资讯以及系列基础文章，微信关注“小和...
今天在用百度页面做练习的时候突然发现，尽管设置了搜索框和button的margin值和p...
（1） 添加文件类型： 打开DW，点击工具栏的编辑，最下面的首选参数，选中文件类...
带有两个卡片的一个卡片组 - 一个供用户输入，一个供显示结果 - 正如本例中展示...
John Au-Yeung 来源：medium 译者：前端小智 有梦想，有干货，微信搜索 【大迁世...
看到LOFTER比赛中提到可以对登陆框重新设计，这两天对比了其他平台的邮箱登陆页...
您将要创造的 在这个新教程中，我们将使用CSS和JavaScript来创建响应式管理仪表...
Dreamweaver中想要插入验证标签，该怎么操作呢？下面我们就来看看详细的教程。 ...
若有任何问题或建议，欢迎及时交流和碰撞。我的公众号是 【脑子进煎鱼了】，GitH...
