Domanda Come centrare orizzontalmente un
in un altro
?


Come posso centrare orizzontalmente a <div> all'interno di un altro <div> usando i CSS (se è anche possibile)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>


3626
2018-06-09 08:34


origine


risposte:


Puoi applicare questo CSS all'interno <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Certo, non devi impostare il width a 50%. Qualsiasi larghezza inferiore al contenuto <div> funzionerà. Il margin: 0 auto è ciò che fa il centraggio effettivo.

Se scegli come target IE8 +, potrebbe essere preferibile avere questo:

#inner {
  display: table;
  margin: 0 auto;
}

Renderà l'elemento interno centrato orizzontalmente e funzionerà senza impostare uno specifico width.

Esempio di lavoro qui:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


4085



Se non si desidera impostare una larghezza fissa sul lato interno div potresti fare qualcosa del genere:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Questo rende l'interiore div in un elemento in linea che può essere centrato con text-align.


1109



Gli approcci migliori sono con CSS 3.

Modello di scatola:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

In base alla tua usabilità puoi anche usare il box-orient, box-flex, box-direction proprietà.

Flettere:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Ulteriori informazioni sul centraggio degli elementi figlio

E questo spiega perché il modello di scatola è l'approccio migliore:


297



Supponiamo che il tuo div sia 200px largo:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Assicurati che l'elemento genitore sia posizionato cioè relativo, fisso, assoluto o appiccicoso.

Se non conosci la larghezza del tuo div, puoi usare transform:translateX(-50%); invece del margine negativo.

https://jsfiddle.net/gjvfxxdj/


215



L'ho creato esempio per mostrare come verticalmente e orizzontalmente  align.

Il codice è fondamentalmente questo:

#outer {
  position: relative;
}

e...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

e rimarrà nel center anche quando tu re-size il tuo schermo


199



Alcuni poster hanno menzionato il modo in cui utilizzare il CSS 3 display:box.

Questa sintassi è obsoleta e non dovrebbe essere più utilizzata. [Guarda anche questo post].

Quindi, solo per completezza, ecco l'ultimo modo di centrare in CSS 3 usando il Modulo di layout della scatola flessibile.

Quindi se hai un semplice markup come:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... e vuoi centrare i tuoi oggetti all'interno della scatola, ecco quello che ti serve sull'elemento genitore (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Se hai bisogno di supportare i browser più vecchi che usano la sintassi più vecchia per la flexbox ecco un buon posto dove guardare


156



Se non vuoi impostare una larghezza fissa e non vuoi il margine extra, aggiungi display: inline-block al tuo elemento.

Puoi usare:

#element {
    display: table;
    margin: 0 auto;
}

119