Home >Web Front-end >HTML Tutorial >HTML centers elements horizontally and vertically

HTML centers elements horizontally and vertically

高洛峰Original: 2017-02-27 10:43:421082browse

When we design the page, we often need to center the p, 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>
    <p class="maxbox">
        <p class="minbox align-center"></p>
    </p>
</body>

Rendering (the following methods have the same renderings):

HTML centers elements horizontally and vertically

First Type: CSS absolute positioning

mainly uses absolute positioning, and then uses 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);   
}

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

Horizontal and vertical center alignment:

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

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

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

Horizontal vertical center alignment:

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

JQuery:

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

The third type: CSS3 absolute positioning + displacement

Using absolute positioning and CSS3's transform: translate can also achieve the same effect.

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

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

Horizontal vertical center alignment:

.align-center{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    -webkit-transform: translate(-50%, -50%);   
       -moz-transform: translate(-50%, -50%);   
            transform: translate(-50%, -50%);        /*向左向上位移*/
}

Fourth type : Flexbox: [Telescopic Layout Box Model]

It is too easy for the Flexbox model to make elements horizontal and vertical.

You need to change the HTML here:

<p class="maxbox align-center">
    <p class="minbox"></p>
</p>

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

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

Horizontal and vertical center alignment:

.align-center{   
    display: flex;   
    display: -webkit-flex;       /*兼容问题*/
    justify-content: center;   
    align-items: center;    
}

Comparison of several methods:

The first CSS absolute positioning margin adjustment, with good compatibility But it 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.
Using the Flexbox model, compatible with Firefox, Opera and Chrome, IE is completely wiped out. It also does not affect the horizontal and vertical centering effect due to changes in width and height.

The above is the entire content of this article, I hope it will be helpful to everyone's study.

For more HTML related articles on horizontal and vertical centering of elements, please pay attention to the PHP Chinese website!

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：HTML optimization tipsNext article：HTML optimization tips

See more

HTML centers elements horizontally and vertically

Related articles