Centering HTML Text

Whether its text, images or other HTML elements learning various methods can be very useful. Some of this is basic but at the same time can be a gigantic pain in the butt on occasion.

I’ll go through various techniques I use and don’t use and how to center html elements both vertically and horizontally. Skip to the vertical methods.

Below is an example using  the CSS Text-Align Property

I am definitely a big fan of flexbox.   I think its amazingly powerful and very easy to implement. However, I’ll just cover a couple techniques just to center text or elements here.

I do like to wrap the centered element in its own DIV as it can help if you need to stack elements in a column with flex-direction: column;

Centering a block element will work from setting the margins to auto.  Keep in mind if you have Text inside this element you will need to align that with a previous method.

This last method involves using the transform translate to position the element. This technique can essentially position the element anywhere on the page.

Because this is absolutely positioned, it will be centered relative to the parent container. Also I will show a image with and without using the transform property to re-adjust the element.

Okay.  Lets get down and dirty with the vertical coding. A lot of people find vertically centering a bit more challenging. Some of these methods are similar to the horizontal CSS techniques.

This is a really simple method which can be good for text, inputs or even blocked elements. Basically you would set the top and bottom padding to the same amount. If you wanted your container to be a height of 500px you would set the top and bottom padding to 250px each. Thus your text in the container would be centered.

I should mention that flexbox is designed to layout and position page elements or the page itself. However, I occasionally use it for single Elements if needed.  But its also a very simple tool to use to center elements vertically.

Similar to the horizontal method we can use Transform Translate to vertically center a block element. But we need to apply this to the Y-Axis instead of the X. One of the differences versus the first two methods is we need to wrap the element in a parent element.  If this isn’t set the page itself would be the parent.

The table cell method involves a parent and child element. Set the height of the parent and set the display as table. The child element will need to be displayed as a table cell and have the vertical align set to middle. This method works with multiple lines of text and the parent element will grow dynamically with the content.

Its probably best not to utilize this technique overly often. It works best with single lines of text and can break if trying to use it with multiple lines.