Posizionare un layer centrato rispetto alla risoluzione con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

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>
Assegniamo al layer una classe a cui faremo riferimento nel codice Css che propongo di seguito:
<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.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.994)

:: Referenze dei fogli di stile Css (41.901)

:: Menu ad effetto mouseover con i Css (39.301)

:: Effetti sui link con i Css (30.313)

:: Testo verticale coi Css (20.105)

:: Angoli smussati in un box coi Css (18.983)

:: Box con effetto ombra con i CSS3 (16.393)

:: Stilizzare i form Html con i Css (16.120)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.900)

:: Colorare le barre di scorrimento del browser con i Css (14.402)

IN EVIDENZA
DOWNLOAD