How to set the horizontal and vertical centering of html elements-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to set the horizontal and vertical centering of html elements

php中世界最好的语言

Jan 24, 2018 am 10:01 AM

html vertical center

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

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

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

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

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!