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.
In supported browsers, you can use top: 50%/ left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically center an element horizontally / vertically:
In supported browsers , you can also set the property to a display value flex and 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:
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 :
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:
In some cases, the parent element has a fixed height. For vertical alignment, you just need to set the line-height child'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 :
An example can be seen here.