How to center an HTML element – Also why this way?

There are four basic ways to center an HTML element horizontally. This article will first introduce the ways to center an HTML element because some people might just want to know the answers quick for their projects. Also, it will later address why you want to pick a certain method over another depending on a situation. Alright, let’s dig in!

METHODS

Use display flex

It is by far the easiest way to center an element. You set this to its parent:

.parent {
  display: flex;
  justify-content: center;
}

Set margin to auto

This only works for block elements such as div, p, and h1 – h6; plus, their width should be specified. Conversely, this doesn’t work for inline and inline-block elements such as span, a, and img. If you want to center one of these inline tags too, set their display property to block and specify the width.

.element {
  display: block; /* only for inline & inline-block elements */
  width: 200px;
  margin: 0 auto;
}

Set text-align to center

This property is for centering inline & inline-block elements such as span, a, img, and even just plain text. You set up a parent element to contain an child inline element. Set this to its parent.

.parent { text-align: center; }

Set position to absolute

Position property specifies how an element is positioned in an document. If you set it to absolute, the element will no longer be in the normal flow. Instead, it will be placed relative to its closest parent whose position is set relative. So, what you need to do is create a parent element whose position is set relative. Next, you place a child element inside of it and set the styles.

.parent {
  position: relative;
}
.child {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
}

When to use and when to avoid!

Pick a method that won’t remove an element from the normal flow as much as possible. For example, it is more suitable to use text-align property to center an inline-element than to use position property.

Normal flow, what?

When styling HTML, it is important to respect the normal flow. By default, block elements are stacked from top to bottom; inline elements go from left to right, the same direction you are reading this text. Changing the normal flow will result in unnecessarily long lines of code. Also, that makes it hard for your team to decode what you wrote because you are changing how elements are supposed to behave by default.

Be accountable for your codes

There are some unavoidable situations where you need to break the rule, and that is okay. It is just a good practice to have yourself accountable as to why you picked a certain method of styling. For that, you cannot just say, “I used flexbox because it’s easy and my favorite.” Instead, you need to explain like “I used flexbox because there will be dynamic data presented here. Flexbox is suitable for aligning an unspecified number of items because flex-wrap property can be configured to break lines of elements if they don’t fit in one line.”

Thanks for reading.

Hope you enjoyed the article. If you have any question or opinion to share, feel free to write some comments.