The CSS properties display: inline-block and vertical-align: middle provide a flexible and maintainable way to center any content inside a . The height of the does not even need to be known and can by dynamically determined by its content.

Use line-height for simple vertical centering To vertically center a single line of text or an icon within its container, we can use the line-height property. This property controls the height of a line in a run of text and adds an equal amount of space above and below the line-box of inline elements.

When the element to be centered is an inline element we use text-align center on its parent. When the element is a block level element we give it a width and set the left and right margins to a value of auto. With text-align: center in mind, most people look first to vertical-align in order to center things vertically.

CSS | Centering Elements

1. Inline elements. We can easily center an inline element within a block level element like this:
2. Block level elements. We can center a block-level element by giving it margin-left and margin-right of auto (which has a known specified width):
3. More than one block level elements.

Margin: auto, while a bit odd when you first see it, is the best and only way to center a block level (position static), element. For anything that is display: inline (like a span tag) – the only way to center it is if you specify text-align: center on the parent.

Center Align Elements To horizontally center a block element (like ), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.

The center line is an implied line that falls within the exact center of any cylinder. Note: In the event of a vertical cylinder, the center line is always perfectly vertical, i.e. parallel to the vertical edges of the format.

Add an element you wish to the section

Block elements have a rectangular structure. The inline elements can be embedded in block elements. The key difference between block and the inline element is that the block elements take up the full width available while the inline elements take the required width to display the contents of the elements.

According to Sitepoint ’s CSS Reference: inline-block makes the element generate a block box that’s laid out as if it were an inline box. According to QuirksMode: An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

CSS Vertical Align. The CSS vertical align property is used to define the vertical alignment of an inline or table-cell box. It is the one of the self-explanatory property of CSS.