HTML and CSS Reference
Keep in mind that for a block element to appear centered, its width must be fixed
and not flexible; otherwise, it takes up all the available width.
<div style="width: 50px; height: 50px;
border: 1px solid black;"
For vertical centering, the easiest way to align content to the middle is to use the
vertical-align property on the parent element with its value set to middle . This
behavior only works as expected for table cell elements, so the container needs to be
changed into one, as in the following example using the display property:
<div style="vertical-align: middle;