How to add centered text to the horizontal divider in HTML using CSS?

Originally posted here!

To add a centered text to the divider in HTML, we can use the CSS flexbox to achieve this.

TL;DR

HTML

<div>Hello world!</div>

CSS

.divider {
  display: flex;
  align-items: center;
  text-align: center;
}

/* To show the lines on right 
and left sides of the text */
.divider::after,
.divider::before {
  content: "";
  border: 1px solid black;
  flex: 1;
}

/* Space on left and right sides of text */
.divider:not(:empty)::before {
  margin-right: 0.25em;
}

.divider:not(:empty)::after {
  margin-left: 0.25em;
}

First, let's make an <div> HTML tag and put the content which we need to show in the center of the divider inside the tag like this,

<div>Hello world!</div>

Now let's add a class name to the div so that we can reference this in the CSS. it can be done like this,

<div class="divider">Hello world!</div>

Now we need to convert the div into a flex element. It can be done like this,

.divider {
  display: flex;
}

Now we need to horizontally align every item that is in the div tag, so to do that we can use the align-items flex property and set its value to center. it can be done like this,

.divider {
  display: flex;
  align-items: center;
}

Let's also align the text inside the tag using the text-align property and set its value to center like this,

.divider {
  display: flex;
  align-items: center;
  text-align: center;
}

Till now, there won't be any visual changes to the div tag.

Now to make a long line to the left and right side of the Hello world! text, we can make use of the ::before and ::after pseudo-elements in CSS.

We need to apply a 1px black color border to both of the div tag's ::after and ::before pseudo-elements. We also need to apply flex: 1 to the pseudo-elements. So that we will have a long line to the right and left side of the text.

NOTE: flex: 1 is a shorthand to set flex properties flex-grow : 1; , flex-shrink : 1; and flex-basis : 0;.

It can be done like this,

.divider {
  display: flex;
  align-items: center;
  text-align: center;
}

/* To show the lines on right 
and left sides of the text */
.divider::after,
.divider::before {
  content: "";
  border: 1px solid black;
  flex: 1;
}

Now we have the divider like this,

But if you look closely the text Hello world! doesn't have much space on both its right and left sides. to set some space we can add this CSS also,

.divider {
  display: flex;
  align-items: center;
  text-align: center;
}

/* To show the lines on right 
and left sides of the text */
.divider::after,
.divider::before {
  content: "";
  border: 1px solid black;
  flex: 1;
}

/* Space on left and right sides of text */
.divider:not(:empty)::before {
  margin-right: 0.25em;
}

.divider:not(:empty)::after {
  margin-left: 0.25em;
}

Now we have a beautiful horizontal divider with text in its center! Yay! 🔥

See the above code live in JSBin

Feel free to share if you found this useful 😃.