HTML - Centrare orizzontalmente un contenitore

Qualora si debba centrare nella pagina un contenitore come un DIV si può fare in questo modo:

Metodo 1: impostare i margini dx e sx su AUTO e inserire un valore per la larghezza del contenitore.

La dimensione del contenitore, un DIV, è stata impostata al 30%, ma potevamo tranquillamente usare un valore specifico come 180px. Gli attributi altezza e colore dello sfondo sono stati inseriti per rendere più esplicito il risultato finale.

<!DOCTYPE html>
<html>
  <head>
    <title>Centrare orizzontalmente un contenitore</title>
    <style>
      .Contenitore{
        margin: 0px auto;
        width: 30%;
        height: 250px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="Contenitore"></div>
  </body>
</html>

Pagina di Esempio.

Metodo 2: nel caso in cui non disponiamo della dimensione esatta della sua larghezza, possiamo risolvere inserendolo in un ulteriore contenitore.

<!DOCTYPE html>
<html>
  <head>
    <title>Centrare orizzontalmente un contenitore senza larghezza</title>
    <style>
      .Contenitore{
        text-align: center;
        border: 2px solid yellowgreen;
      }
    </style>
  </head>
  <body>
    <div class="Contenitore">
      <div>Contenitore centrato</div>
    </div>
  </body>
</html>

Pagina di Esempio.

HTML - Centrare orizzontalmente e verticalmente un contenitore

Nel caso in cui si debba centrare nella pagina, in orizzontale e in verticale, un contenitore si può procedere in questo modo:

Si deve lavorare sfruttando la posizione assoluta del contenitore. Innanzitutto spostiamo il nostro oggetto al centro dello schermo impostando gli attributi top e left al 50%, poi, considerato che il punto di riferimento di ogni contenitore è lo pigolo in alto a sinistra, lo facciamo arretrare verso destra e verso l'alto di una quantità di pixel pari alla metà della larghezza e altezza rispettivamente, portandolo esattamente al centro della pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Centrare orizzontalmente e verticalmente un contenitore</title>
    <style>
      .Contenitore{
        width: 200px;
        height: 130px;
        background-color: orange;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -65px;
        margin-left: -100px;
      }
    </style>
  </head>
  <body>
    <div class="Contenitore"></div>
  </body>
</html>

Pagina di Esempio.

Appunti di Programmazione

HTML - Centrare orizzontalmente un contenitore