html - una - spostare un immagine al centro css




Come centrare orizzontalmente un<div>? (20)

Come posso centrare orizzontalmente un <div> all'interno di un altro <div> usando i CSS?

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

Allineamento del testo: centro

Applicazione text-align: center i contenuti in linea sono centrati all'interno della casella di riga. Tuttavia poiché il div interno ha una width: 100% predefinita width: 100% devi impostare una larghezza specifica o usare uno dei seguenti:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Margine: 0 auto

Using margin: 0 auto è un'altra opzione ed è più adatta per la compatibilità con i browser più vecchi. Funziona insieme con display: table .

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

Flexbox

display: flex si comporta come un elemento di blocco e ne espone il contenuto secondo il modello di flexbox. Funziona con justify-content: center .

Nota: Flexbox è compatibile con la maggior parte dei browser, ma non tutti. Vedi here per un elenco completo e aggiornato di compatibilità con i browser.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Trasformare

transform: translate ti permette di modificare lo spazio delle coordinate del modello di formattazione visuale CSS. Usandolo, gli elementi possono essere tradotti, ruotati, ridimensionati e inclinati. Per centrare orizzontalmente richiede position: absolute e left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (Obsoleto)

Il tag <center> è l'alternativa HTML a text-align: center . Funziona con i browser più vecchi e la maggior parte di quelli nuovi, ma non è considerato una buona pratica in quanto questa funzione è obsolete ed è stata rimossa dagli standard Web.

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


Centratura solo orizzontalmente

Nella mia esperienza, il modo migliore per centrare una scatola in orizzontale è applicare le seguenti proprietà:

Il container:

  • dovrebbe avere text-align: center;

La casella del contenuto:

  • dovrebbe avere display: inline-block;

demo:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Vedi anche questo Fiddle !

Centratura sia in orizzontale che in verticale

Nella mia esperienza, il modo migliore per centrare una scatola sia verticalmente che orizzontalmente è utilizzare un contenitore aggiuntivo e applicare le seguenti proprietà:

Il contenitore esterno:

  • dovrebbe avere display: table;

Il contenitore interno:

  • dovrebbe avere display: table-cell;
  • dovrebbe avere vertical-align: middle;
  • dovrebbe avere text-align: center;

La casella del contenuto:

  • dovrebbe avere display: inline-block;

demo:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Vedi anche questo Fiddle !


Ad esempio, vedi questo link e lo snippet di seguito:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Se hai un sacco di figli sotto un genitore, quindi il tuo contenuto CSS deve essere come questo su Fiddle .

Il contenuto HTML sembra così:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Quindi vedi questo esempio sul violino .


Alcuni poster hanno menzionato il modo CSS 3 per centrare usando display:box .

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

Quindi, per completezza, ecco l'ultimo modo di centrare in CSS 3 utilizzando 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, here's un buon posto dove guardare.


Chris Coyier che ha scritto un post eccellente su "Centering in the Unknown" sul suo blog. È una carrellata di più soluzioni. Ne ho pubblicato uno che non è pubblicato in questa domanda. Ha più supporto per i browser, quindi la soluzione flexbox, e non stai usando display: table; che potrebbe rompere altre cose.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Ecco quello che vuoi nel modo più breve.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Flex ha una copertura del supporto del browser superiore al 97% e potrebbe essere il modo migliore per risolvere questo tipo di problemi in poche righe:

#outer {
  display: flex;
  justify-content: center;
}

Ho creato questo example per mostrare come align verticalmente e orizzontalmente .

Il codice è fondamentalmente questo:

#outer {
  position: relative;
}

e...

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

e rimarrà al center anche quando ridimensionate lo schermo.


Il modo in cui solitamente lo faccio è usare la posizione assoluta:

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

Il div esterno non ha bisogno di ulteriori propertiti per far funzionare tutto questo.


Imposta la width e imposta il margin-left e il margin-right su auto . Questo è solo per l'orizzontale , però. Se vuoi entrambi i modi, faresti semplicemente entrambe le cose. Non aver paura di sperimentare; non è come se rompessi qualcosa.


Mi rendo conto che sono piuttosto in ritardo nel gioco, ma questa è una domanda molto popolare e di recente ho trovato un approccio che non ho mai visto menzionato qui, quindi ho pensato di documentarlo.

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

EDIT: entrambi gli elementi devono avere la stessa larghezza per funzionare correttamente.


Non può essere centrato se non gli dai una larghezza, altrimenti prenderà, di default, l'intero spazio orizzontale.


Prova a giocare con

margin: 0 auto;

Se vuoi centrare il tuo testo, prova a utilizzare:

text-align: center;

Puoi applicare questo CSS al <div> :

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

Naturalmente, non è necessario impostare la width al 50% . Funzionerà qualsiasi larghezza inferiore al contenimento <div> . 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 una width specifica.

Esempio di lavoro qui:

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


Questa è la mia risposta.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>


Questo metodo funziona anche bene:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

Per il <div> , l'unica condizione è che la sua height e width non devono essere maggiori di quelle del suo contenitore.


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;
}

Se non vuoi impostare una larghezza fissa sul div interno puoi fare qualcosa del genere:

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

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

Ciò rende il div interno un elemento in linea che può essere centrato con text-align .


Un'altra soluzione per questo senza dover impostare una larghezza per uno degli elementi è l'utilizzo dell'attributo transform CSS 3.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Il trucco è che translateX(-50%) imposta l'elemento #inner 50% a sinistra della sua larghezza. Puoi usare lo stesso trucco per l'allineamento verticale.

Ecco un Fiddle mostra l'allineamento orizzontale e verticale.

Ulteriori informazioni sono disponibili su Mozilla Developer Network .






centering