你的位置:首页 > 网页设计

[网页设计]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;  }

 

运行效果

运行时实际尺寸