horizontally align center the div with red border
This question already has an answer here:
.vcenter {
display: flex;
justify-content:center; //making content center;
align-items:center; //vertical align to middle of div
}
<div class="text-center" style="border: 1px solid black;padding-bottom:10px; width:100%;height:100%;">
<h2>xyz</h2>
<div style="height: 500px;width: 500px;border: 1px solid red; text-align: center; margin: 0 auto" class="vcenter center-block"><img src="" alt="Cinque Terre" width="304" height="236">
</div>
</div>
.vcenter {
display: table-cell;
vertical-align: middle;
}
.text-center div{
display: flex;
}
<div class="text-center" style="border: 1px solid black;padding-bottom:10px; width:100%;height:100%;">
<h2>xyz</h2>
<div style="height: 500px;width: 500px;border: 1px solid red; text-align: center; margin: 0 auto" class="vcenter center-block"><img src="" alt="Cinque Terre" width="304" height="236">
</div>
</div>
链接地址: http://www.djcxy.com/p/75878.html
上一篇: 居中动态div
下一篇: 将div与红色边框水平对齐