大佬教程收集整理的这篇文章主要介绍了html – 垂直和horinzontally对齐容器中的多个div子，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<div id="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
</div>
<style>
#container{
width:100%;
height:100%;
overflow-y:auto;
position:absolute;
left:0; top:10px;
padding:10px;
}
.card{
width:100px; height:100px; margin:10px;
float:left;
}
</style>
我试图垂直和水平对齐div框,以便出现更多的框,它仍然在容器中垂直和水平居中.例如：
HTML
<div class="container">
<div class="container-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
CSS
.container {
position: relative;
display:table;
background: red;
width:100%;
height: 100%; /* auto is default,you can have ur height here */
}
.container-wrapper {
display: table-cell;
margin:auto;
text-align:center;
font-size:0;
width:90%;
height:90%;
vertical-align:middle;
}
.card {
display: inline-block;
height:100px;
width:100px;
border: 1px solid #ddd;
background: #eee;
margin:10px;
}
以上是大佬教程为你收集整理的html – 垂直和horinzontally对齐容器中的多个div子全部内容，希望文章能够帮你解决html – 垂直和horinzontally对齐容器中的多个div子所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。