Rumah > Artikel > hujung hadapan web > css水平居中，竖直居中技巧_html/css_WEB-ITnose
css水平居中，竖直居中技巧_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:46:581132semak imbas
要点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; } 运行效果
运行时实际尺寸
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：iReport-关于部署在weblogic中的项目用IE访问页面加载慢但是用火狐或者谷歌浏览器访问很快的问题_html/css_WEB-ITnoseArtikel seterusnya：HTML5属性_html/css_WEB-ITnose