HTML and CSS Reference
In-Depth Information
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;"
class="box-center"></div>
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;
display: table-cell;
min-height: 100px;">Centered</div>
