Centrare elementi con position absolute

Capita spesso di progettare un layout e di dover centrare un div o un’immagine con la proprietà absolute . Oggi vediamo insieme due modi diversi che ci permettono di centrare in orizzontale il nostro elemento .

Soluzione 1:

  • compatibile con tutti i browser moderni, IE6 compreso
  • necessario intervenire su media queries nei layouts responsive.

Immaginiamo di aver un div con l’id box che ha seguenti proprietà css:

#box { 
 width:200px;
 height:200px;
 position:abolute;
 top:0;
}


Per centrare il div dobbiamo impostare il valore left 50% ,cioè la meta esatta della nostra pagina.
Facendo cosi il nostro elemento avrà il bordo sinistro esattamente al centro della pagina, ma non coinciderà con il centro di quest’ultima, per far coincidere il centro del div con il centro della pagina, basta assegnare il valore negativo, corrispondente alla meta della lunghezza del #box, al margine sinistro:

#box {
 width:200px;
 height:200px;
 position:absolute;
 top:0;
 left:50%;
 margin-left:-100px;
}


Soluzione 2:

  • Compatibile con tutti i browser moderni, IE6 /IE7 esclusi
  • Non è necessario intervento su media queries nei layouts responsive
#box {
 width:40%;
 height:200px;
 position:absolute;
 top:0px;
 right:0px;
 left:0px;
}

Segnalibro e Share

Costantino Fusco

Sviluppatore di siti internet e di applicazioni web. Programmazione Web: PHP/MySQL HTML/CSS Ajax Javascript wordpress, Strategie SEO

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>