css horizontal centering, vertical centering techniques_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:46:58

Original

1161 people have browsed it

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>

Copy after login

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;    }

Copy after login

Running effect

Actual size at runtime

Related labels：

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

source：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-ITnose Next article：HTML5 attribute_html/css_WEB-ITnose

Statement of this Website

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