css div 垂直居中
参考: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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步