How to center text in middle of text color

Question

I'm trying to put text in the middle of a colored box. When I try to center the text, it centers it but the text is still toward the top of the box and not in the middle. How do I move it down so it's in the middle of the background color? Should I be using something else instead of background color?

h1 {
font-family: 'Montserrat', sans-serif;
background-color: #C28FE2;
text-align: center;
width: 500px;
height: 100px;
}

You may want to use Flexbox for your solution. https://codepen.io/anon/pen/LwzqXB — m4n0, Aug 04 '19 at 03:25

AdityaSrivast · Accepted Answer · 2019-08-04T03:33:03.753

How do I move it down so it's in the middle of the background color?

You can implement it with flexbox.

Try this:

h1 {
  font-family: 'Montserrat', sans-serif;
  background-color: #C28FE2;
  width: 500px;
  height: 100px;
  /*added code from here*/
  display: flex;
  align-items: center;
  justify-content: center;
}

<h1>This is heading</h1>

Should I be using something else instead of background color?

No, background-color is correct property you are going for. The only thing is instead of applying background-color to h1, you can apply it to some div or section and insert h1 inside it. This will save you from giving height to h1, which is less frequently observed as 100px height.

How to center text in middle of text color

1 Answers1