Center H3 in section (Vertically and Horizontally)

Question

Center H3 in section (Vertically and Horizontally)

Navigation

#1 by (0 votes)

1

Good Night, I'm having a problem aligning in the center of the section (using Html5) an H3. I've tried it in many ways but nothing.

HTML

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

CSS

.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%;
}

However, the "Test" is not aligning correctly.

Any ideas?

css-centering

asked by anonymous 28.04.2018 / 23:33

1 answer

Merging Android Manifest.xml failed with AdMob [UNITY] Error when adding FK

score 0 · 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>