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.