Come centrare un div fixed sia in orizzontale che verticale

Con il seguente codice html / css è possibile centrare un div con attributo position impostato su fixed sia in orizzontale che vericale:

<html>
  <header>
    <style type="text/css">
      div.fixed_center {
        border: red 1px solid;
        position: fixed;
 
        /* Centra verticalmente */
        height: 200px;
        top: 50%;
        margin-top: -100px;
 
        /* Centra orizzontalmente */
        width: 300px;
        left: 50%;
        margin-left: -150px;
      }
    </style>
  </header>
  <body>
    <div class=fixed_center>
      Questo div viene centrato sia in orizzontale che in verticale
    </div>
  </body>
</html>

Gli elementi necessari sono sia la dimensione in pixel in altezza che in altezza e definirli con

height: 200px;
width: 300px

Il trucco sta nell’impostare la posizione iniziale del div al 50% della finestra del browser con gli attributi css

top: 50%;
left: 50%

e successivamente impostare un margine negativo dell’esatta metà dell’altezza e larghezza

margin-top: -100px;
margin-left: 150px;

Vedi ESEMPIO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *