参考:http://css-tricks.com/centering-in-the-unknown/
<style> .valign { font-size: 0px;/* clear spacing*/ } .valign:before { content: ‘‘; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } .valign-middle, .valign-bottom { display: inline-block; font-size: 1rem; } .valign-middle { vertical-align: middle; } .valign-bottom { vertical-align: bottom; } </style>
<div class="valign" style="height: 20rem;border:1px solid red;"> <div class="valign-middle" style="border:1px solid blue;"> 我在中间 </div> </div> <br> <div class="valign" style="height: 20rem;border:1px solid red;"> <div class="valign-bottom" style="border:1px solid blue;"> 我在底部 </div> </div>
时间: 2024-10-10 15:02:05