allineamento verticale e orizzontale (centrale e centrale) con css

Question

Sto praticando CSS e sono così confuso come posso forzare il mio elemento div al centro (verticalmente e orizzontalmente) nella mia pagina (indicare in che modo o in che modo cross browser Compatibilità)?

Cordiali saluti!

Answer 1

Ci sono molti metodi:

1. Centro allineamento orizzontale e verticale di un elemento a misure fisse

CSS

<div style="width:200px;height:100px;position:absolute;left:50%;top:50%; 
margin-left:-100px;margin-top:-50px;"> 
<!–content–> 
</div> 

---

2. Centro orizzontalmente e verticalmente una singola riga di testo

CSS

<div style="width:400px;height:200px;text-align:center;line-height:200px;"> 
<!–content–> 
</div> 

---

3. Centrare allineamento orizzontale e verticale di un elemento senza misura specifica

CSS

<div style="display:table;height:300px;text-align:center;"> 
<div style="display:table-cell;vertical-align:middle;"> 
<!–content–> 
</div> 
</div> 

---

Più qui:Horizontal and Vertical Alignment in CSS

Answer 2

This blog post descritti due metodi di centratura un div orizzontalmente e verticalmente. Uno usa solo CSS e funzionerà con div che hanno una dimensione fissa; l'altro utilizza jQuery e lavorerà div per il quale non si conoscono le dimensioni in anticipo.

ho duplicato il CSS e jQuery esempi dalla demo del post qui:

CSS

Supponendo di avere un div con una classe di .classname, il css qui sotto dovrebbe funzionare.

Il left:50%; top:50%; imposta l'angolo in alto a sinistra del div al centro dello schermo; lo margin:-75px 0 0 -135px; lo sposta a sinistra e aumenta di metà della larghezza e dell'altezza rispettivamente del div di dimensione fissa.

.className{ 
    width:270px; 
    height:150px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-75px 0 0 -135px; 
} 

jQuery

$(document).ready(function(){ 
    $(window).resize(function(){ 
     $('.className').css({ 
      position:'absolute', 
      left: ($(window).width() - $('.className').outerWidth())/2, 
      top: ($(window).height() - $('.className').outerHeight())/2 
     }); 
    }); 
    // To initially run the function: 
    $(window).resize(); 
}); 

Ecco un demo of the techniques in practice.

Answer 3

Questo non è facile da fare come ci si potrebbe aspettare: si può davvero fare solo l'allineamento verticale se si conosce l'altezza del contenitore. Se questo è il caso, puoi farlo con il posizionamento assoluto.

Il concetto è impostare le prime posizioni/sinistra al 50%, e quindi utilizzare margini negativi (impostato a metà altezza/larghezza) per estrarre il contenitore ritorna ad essere centrato.

Esempio: http://jsbin.com/ipawe/edit

CSS di base:

#mydiv { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    height: 400px; 
    width: 700px; 
    margin-top: -200px; /* -(1/2 height) */ 
    margin-left: -350px; /* -(1/2 width) */ 
    } 

Answer 4

Questo sito offre alcune opzioni sul verticale di centraggio tuo div: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 5

C'è una soluzione migliore adesso: Vertical align anything with just 3 lines of CSS