How to set the horizontal and vertical centering of html elements

php中世界最好的语言
Release: 2018-01-24 10:01:44
Original
4705 people have browsed it

This time I will show you how to set the horizontal and vertical centering of html elements. What are the precautions for setting the horizontal and vertical centering of html elements. The following is a practical case, let's take a look.

When we design the page, we often need to center the DIV, and display it horizontally and vertically relative to the page window, such as centering the login window.

So far, many methods have been explored.

HTML:

<body>  
    <div class="maxbox">  
        <div class="minbox align-center"></div>  
    </div>  
</body>
Copy after login

The first type: CSSAbsolute positioning

Mainly use absolute positioning, and then use margin to adjust to the middle position.

Parent element:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}
Copy after login
Copy after login

Child element:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}
Copy after login
Copy after login

Horizontal and vertical center alignment:

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    margin-left: -100px;   /*width/-2*/  
    margin-top: -100px;    /*height/-2*/  
}
Copy after login

Second type: CSS absolute positioning + Javascript /JQuery

Mainly use absolute positioning, and then use Javascript/JQuery to adjust to the middle position. Compared with the first method, this method improves the flexibility of the class.

Parent element:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}
Copy after login
Copy after login

Child element:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}
Copy after login
Copy after login

Horizontal and vertical center alignment:

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
}
Copy after login

JQuery:

$(function(){   
    $(".align-center").css(   
        {   
            "margin-left": ($(".align-center").width()/-2),   
            "margin-top": ($(".align-center").height()/-2)   
        }   
    );   
});
Copy after login

Several methods Comparison:

The first CSS absolute positioning margin adjustment has good compatibility but lacks flexibility. If there are many boxes that need to be horizontally and vertically centered, they need to write different .align-center because of their different width and height.
The second one uses scripting language, which has good compatibility and makes up for the shortcomings of the first one. The effect of horizontal and vertical centering will not be affected by changes in width and height.
The third one uses some new properties of CSS3 and is compatible with IE10, Chrome, Firefox, and Opera. The compatibility is not very good, and the horizontal and vertical centering effect will not be affected by changes in width and height.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use HTML and CSS to make Dabai

##What are the commonly used tags in XHTML

How to use the img image tag in HTML/XHTML

The above is the detailed content of How to set the horizontal and vertical centering of html elements. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!