Posizionare un layer centrato rispetto alla risoluzione con i Css

Autore: Luca Ruggiero | Tell a Friend Corso HTML Impara il linguaggio di marcatura per il Web. Corso CSS Web Design ed Accessibilità secondo il W3C! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

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">Esempio di 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>