5 ways to align HTML element horizontally and vertically

Anyone who works with HTML / CSS sooner or later faces the problem of vertical and horizontal alignment of an element. So that you don't googling again and find many different options, I have collected a few of the most popular here.

Method 1

In supported browsers, you can use top: 50%/ left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically center an element horizontally / vertically:

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

An example can be viewed here, and here you can see the full-screen version.

Method 2

In supported browsers , you can also set the property to a display value flexand use align-items: center justify-content: center for vertical and horizontal centering, respectively. Most importantly, do not forget to add vendor prefixes (as in the example ) so that this trick works in more browsers:

html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

Here's an example and a full screen version .

Method 3

In some cases, you will need to make sure the height of the html/ element body is 100%.

To set the vertical alignment properties width and height the parent value 100%and add display: table. In the child, change the value display to table-cell and add vertical-align: middle.

For horizontal alignment of text and other inline elements, you can either use text-align: center, or margin: 0 auto if you are dealing with a block element. This should work in most browsers :

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

Examples are available here and here .

Method 4

This assumes that the height of the text is known in advance. In this case, for example 18px. Now you just need to assign a position value to the element's property absolute and move it from above 50%relative to the parent element. Finally, the property margin-top needs to be set to a negative value equal to half the element's height:

html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

For examples here and here . This option should work in all supported browsers.

Method 5

In some cases, the parent element has a fixed height. For vertical alignment, you just need to set the line-heightchild's property to the height of the parent. While this will work in some cases, you shouldn't use it this way, as a few lines of text will ruin everything :

.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}

An example can be seen here.