Point 1: Container settings [position: absolute;]
Point 2: Container settings [top: 50%;left: 50%;]
Points 3: Know the actual width and height of the container (can be preset or dynamically obtained at runtime)
Point 4: Horizontal centering: margin-left = -1* (width/2 ), for example, width is 280px, then set [margin-left:140px;]
Point 5: vertical centering: margin-top = -1*(height/2), for example, height is 110px, then set 【margin-top:55px;】
Examples are as follows:
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; }
Running effect
Actual size at runtime