Centering elements

Centering elements is an aspect known since the first CSS versions. There were always some element/elements on a page that needed to be centered vertically or horizontally in some container or in a browser. The easiest way to center some elements was to append the element into a table element and add to it vertical align and horizontal align attributes in HTML:

<td valign="middle" align="center>  </td>

But how can we do this in modern CSS? There are two kinds of centering:

• Horizontal

• Vertical

Let's resolve this problem.

Inline elements – horizontal centering

Let's assume that we have a text that we need to center. It is very simple. We just need to add text-align: center and that's it. In the example that we will implement, the background for our container is set to red and the element's background is set to white to see how it works.

Let's start with this HTML code:

<p class="container">
    <span class="element">Centered</span>
</p>

And SASS...