Centering H3 in Section (Vertically and Horizontally)

Question

I’m having a problem lining up a h3 in the center of section. I’ve tried so many ways but nothing.

.BlackSky {
  background-color: #1C1624;
  width: 100%;
  height: 300px;
}

.StarsSky {
  width: 100%;
  height: 100%;
  background-image: url('../images/star.png');
}

.StarsSky h3 {
  font-size: 4em;
  color: #F0FFFF;
  margin-bottom: 0%;
}

<section class="BlackSky"> //Bacgkround
  <section class="StarsSky">
    <h3>Teste</h3>
  </section>
</section>

meanwhile the Teste is not aligning properly.

Any idea?

Answer 1

section{
  background-color: #1C1624;
  width: 100%;
  height: 300px;
}
.StarsSky {
  width: 100%;
  height: 100%;
  background-image: url('../images/star.png');
}
h3{
  font-size: 4em;
  color: #F0FFFF;
  text-align: center; 
  position: relative;
  margin:0;
  top: 50%;
  left: 50%; 
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

<section class="BlackSky">
  <section class="StarsSky">
    <h3>TESTE</h3>
  </section>
</section>