7 tecniche diversi per centrare elementi block tipo div

Oggi vediamo come centrare elementi in orrizontale e in verticale che entrano nella categoria block. Prima di tutto vediamo cosa sono cosi detti elementi block . Gli elementi block sono dei elementi che formano un blocco separato e occupano una riga intera per largezza in una pagina web.  E in verticale occupano l’altezza necessaria per il  suo contenuto.

Come per esempio un div<div>, un titolo <h1>, un paragrafo <p> o una tabella <table>  un video <video>,  e cosi via...

Noi in questo articolo per mostrare varie tecniche per centrare elemeni blocco useremo un semplice tag <div> che diciamo e il piu rapresentativo fra vari elementi che entrano nella categoria  block.

 

animatedDude

Cosa sono elementi inline e block

video prevui

1. Centrare un div orizzontalmente quando sapiamo la larghezza del nostro div

 div { width: 300px; margin: 0 auto; /*centriamo elemento in orizzontale all'interno dell'unità genitore */ } 

div con largezza di 300px allineato al centro con margin: 0 auto;

1.2 Centrare orizzontalmente se un div  è inserito in un altro div e non è indicata la sua larghezza

<div class="wrapper">
<div class="box"></div>
</div>
 stile CSS
.wrapper {
text-align: center;
}

div al interno di un altro div allineato al centro con text-align: center;

 

 

1.3.Allineare un div  quando sapiamo la sua larghezza ed esso dovrebbe essere fissato al centro del blocco genitore:

<div class="wrapper">
<div class="box"></div>
</div>
stili CSS
.wrapper {
position: relative; /* attribuire al blocco genitore posizionamento relativo per poter dopo mettere nel posizionamento assoluto un altro blocco al suo interno  */
}
.box {
width: 400px;
position: absolute; 
left: 50%;
margin-left: -200px; /*spostare il blocco a sinistra per meta della sua larghezza */
}

div con largezza indicata allineato al centro di un altro div atraverso proprieta position

 

1.4 Centrare piu elementi blocco (div) in orizzontale in una riga sola :

<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
stili CSS
.wrapper {
text-align: center; /*allineare contenuto del blocco al centro */
}
.box {
display: inline-block; /* trasformare un elemento block in un inline-block */
margin-right: -0.25em; /*eliminiamo spazio tra i blocchi sulla destra */
}

 

Sono il primo block
Sono il secondo
Sono il terzo

 

2. Centrare  in verticale elementi block tipo div.

2.1 Centrare  verticalmente  un bottone o voci del menu

.button {
  height: 50px;
  line-height: 50px;
}

 

 

2.2 Centrare in verticale un div al interno di un altro div  genitore:

<div class="wrapper">
<div class="box"></div>
</div>
Stili CSS
.wrapper {
  position: relative;
}
.box {
  height: 100px;
  position: absolute;
  top: 50%;
  margin: -50px 0 0 0;
}

sono posizionato atraverso proprieta position

 

 

2.3. Centrare in verticale un div come in una tabella:

<div class="wrapper">
<div class="box"></div>
</div>
Stili CSS
.wrapper {
  display: table;
  width: 100%;
}
.box {
  display: table-cell;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

sono posizionato atraverso proprieta display: table-cell; vertical-align: middle;

 

 

2.4. Centrare in vertuicale un div per il quale viene specificata larghezza e altezza, e dovrebbe essere allineato al centro del div genitore:

<div class="wrapper">
<div class="box"></div>
</div>
Stili CSS
.wrapper {
  position: relative;
}
.box {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: auto; /*per impedire la fuoriuscita del contenuto del blocco */
}

 

 

2.5. Centre un div in verticale utilizzando trasformazioni CSS3:

2.5.1 Se sono specificate le dimensioni del'elemento

<div></div>
Stili CSS
div {
  width: 300px; /*largezza del blocco*/
  height:100px; /*indichimo altezza del blocco*/
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
}

 2.5.1 Se le dimensioni del div non sono specificati e il div non è vuoto

<div>
  <h1>Some text here</h1>
</div>
Stili CSS
h1 {
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
}

Il mio titolo

 

2.6 Posizionamento assoluto di un div

2.6.1 Al centro della pagina

<dody>
<div class="box"></div>
</body>
Stili CSS
div {
  width: 500px;
  height: 100px; /* se non indichiamo l'altezza esso sara uguale al 100% del contenuto  */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

 

 

2.6.2 Al centro del blocco

<div class="wrapper">
<div class="box"></div>
</div>
Stili CSS
.wrapper {
  position: absolute;
}
.box {
  width: 100px;
  height: 100px; /* se non indichiamo l'altezza esso sara uguale al 100% del contenuto */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

 

Abbiamo rivisto quasi tutti i metodi principali per alineare al centro varie elementi HTML che entrano nella categoria block e se vogliamo attribuire una di questi tecniche al elemento  inline basterebbe come proprietà CSS per esso indicare display:block e gia dopo usare una delle soluzioni indicati sopra.

Cosa sono posizionamento assoluto e relativo potrai scoprire nel nostro corso gratuito dedicato al linguaggio CSS clicando la immagine del video sotto.

 animatedDude

video prevui

Letto 3163 volte