Poderia dar um exemplo de como centralizar um elemento div na página usando CSS?

Para centralizar um elemento <div> na página usando CSS, pode-se usar várias técnicas. Uma das mais simples e versáteis é usar Flexbox:

body, html {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;    /* vertical */
  height: 100vh;          /* altura do contêiner - toda a tela */
}

.centered-div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

E no HTML:

<div class="container">
  <div class="centered-div">Bloco centralizado</div>
</div>

Este método alinha o bloco aninhado ao centro da tela, tanto vertical como horizontalmente.

Outro método é usar posicionamento absoluto com transformação:

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: lightcoral;
}

Este método também centra o elemento relativamente à janela do navegador.