你的位置:首页 > 软件开发 > 网页设计 > css水平居中,竖直居中技巧

css水平居中,竖直居中技巧

发布时间:2015-04-02 11:00:35
要点1:容器设置【position: absolute;】要点2:容器设置【top: 50%;left: 50%;】要点3:要知道容器实际的width和heigh(可以是预设的,也可以是运行时动态获取到的)要点4:水平居中:margin-left = -1*(width/2),例 ...

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水平居中,竖直居中技巧

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。