Home >Web Front-end >HTML Tutorial >css horizontal centering, vertical centering techniques_html/css_WEB-ITnose
css horizontal centering, vertical centering techniques_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:581205browse
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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：iReport-About the problem that the page loading of projects deployed in weblogic is slow when accessed with IE but very fast when accessed with Firefox or Google Chrome_html/css_WEB-ITnoseNext article：iReport-About the problem that the page loading of projects deployed in weblogic is slow when accessed with IE but very fast when accessed with Firefox or Google Chrome_html/css_WEB-ITnose