Autore: Luca Ruggiero

In questo tip ricorreremo ad un po di fantasia per creare un semplice quanto simpatico effetto grafico per centrare un layer Html rispetto alla risoluzione video corrente.

Un simile espediente può tornare utile come mezzo pubblicitario, o per inserire al centro di una pagina di introduzione un'immagine o qualsiasi cosa.

Disegnamo il layer Html:

<div class="LayerCentrato">Layer Html centrato</div>

<style type="text/css">
 body {
  margin: 0px;
  height: 100%;
 }
 div.LayerCentrato {
   text-align: Center;
   background-color: #EEEEEE;
   color: #192939;
   position: Absolute;
   top: 50%;
   left: 50%;
   font-size: 12px;
   font-family: Verdana;
   font-weight: Bold;
   width: 350px;
   height: 200px;
   border: Solid 1px #CCCCCC;
   margin: -100px, -175px;
 }
</style>

I passaggi essenziali sono evidenziati in rosso: assegno al corpo della pagina un margine complessivo di zero (0) pixel ed imposto l'altezza al 100%. Assegno al layer il posizionamento assoluto, la distanza dai margini di sinistra e dall'alto al 50%, e modifico (in negativo) i margini del layer in funzione dell'altezza e della larghezza del layer stesso.

Per capirci meglio, se la larghezza del layer è 350 pixel, la sua metà in negativo è -175 pixel; se la larghezza fosse stata 400 pixel, avrei impostato il margine in larghezza a -200 pixel.

Lo stesso discorso vale per l'altezza.