Centrare un titolo contenuto dentro ad un div nel mezzo della pagina html

In questo breve video vedrete come centrare perfettamente un testo (un titolo per esempio) contenuto dentro un div, all’interno della pagina HTML (il contenitore)

Qui sotto il codice che ho scritto nel video

HTML

<div class="contenitore">
  <div class="titolo">IO SONO IL TITOLO</div>
</div>

CSS

html, body {
  height:100%;
  margin:0;
}
.contenitore{
  height:100%;
  background-color:#FFFF00;
}
.titolo{
  position:absolute;
  background-color:#FF0000;
  color:#FFFFFF;
  top: 50%; left:50%;
  transform: translate(-50%,-50%);
  padding:20px;
  border-radius: 25px;
}