How to vertically align text within element css?

Question

I am making a chrome extension for the first time and am trying to centre text. And the moment I am using text-align: centre; to horizontally align it but can't figure out how to vertically align so at the moment my text looks like this:

If anyone could help that would be great.

Answer 1

ex) display: table

div{
  display: table;
  width: 100px;
  height: 50px;
  background-color: #000;
}

div p{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #fff;
}

<div>
  <p>chatter</p>
</div>

ex) flex

div{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  background-color: #000;
}

div p{
  color: #fff;
}

<div>
  <p>chatter</p>
</div>

ex) position

div{
  position: relative;
  width: 100px;
  height: 50px;
  background-color: #000;
  text-align: center;
}
div p{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
}

<div>
  <p>chatter</p>
</div>

Answer 2

A really simple class I use for this is

.is-vertical-center {
    display: flex;
    align-items: center;
}

Hope this helps!