首頁 > 開發者 > JavaScript
css水平置中，豎直置中技巧，css豎直置中技巧
要點1：容器設定【position: absolute;】
要點2：容器設定【top: 50%;left: 50%;】
要點3：要知道容器實際的width和heigh（可以是預設的，也可以是運行時動態擷取到的）
要點4：水平置中：margin-left = -1*（width/2），例如width是280px，則設定【margin-left:140px;】
要點5：豎直置中：margin-top = -1*（height/2），例如height是110px，則設定【margin-top:55px;】
例子如下：
html
<html><head></head><body><div id="alert"> <div class="alert-header" style="display: none;">資訊提示</div> <div class="alert-message">GOOD</div> <div class="alert-footer"> <div class="btn-close">確定</div> </div></div></body></html>
css
#alert { position: absolute; width: 280px; top: 50%; left: 50%; margin-top: -55px; margin-left: -140px; border-radius: 5px; background: #fff; z-index: 1000000; padding: 20px; }
運行效果
運行時實際尺寸
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
