Come centrare orizzontalmente a < div > ;?

Question

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>

Answer 1

Puoi applicare questo CSS al < div > interno:

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

Naturalmente, non è necessario impostare la larghezza su 50% . Qualsiasi larghezza inferiore a < div > funzionante funzionerà. Il margin: 0 auto è ciò che fa il vero centraggio.

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

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

Posizionerà l'elemento interno al centro in orizzontale e funziona senza impostare una larghezza specifica.

Esempio di lavoro qui:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

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

Answer 2

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 in un elemento incorporato che può essere centrato con text-align .

Answer 3

I migliori approcci sono con CSS 3 .

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

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

Secondo la tua usabilità puoi anche usare le proprietà box-orient, box-flex, box-direction .

Flex :

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

Ulteriori informazioni sulla centratura degli elementi figlio

• Link 2

• Link 3

• Link 4

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

• Perché il modello di scatola W3C è considerato migliore?

Answer 4

Supponi 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/

Answer 5

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

Il codice è sostanzialmente questo:

#outer {
  position: relative;
}

e ...

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

e rimarrà nel center anche quando ridimensionate il vostro schermo.

Answer 6

Alcuni poster hanno menzionato il modo CSS & nbsp; 3 di centrare usando display: box .

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

Quindi, solo per completezza, ecco l'ultimo modo di centrare in CSS & nbsp; 3 usando Modulo di layout box flessibile .

Quindi se hai un markup semplice 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 cosa 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 devi supportare browser meno recenti che utilizzano la sintassi precedente per flexbox ecco un buon posto dove cercare .

Answer 7

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

Answer 8

Centrare un div di altezza e larghezza sconosciute

Orizzontalmente e verticalmente. Funziona con browser ragionevolmente moderni (Firefox, Safari / WebKit, Chrome, Internet & nbsp; Explorer & nbsp; 10, Opera, ecc.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

Armeggia ulteriormente su Codepen o su JSBin .

Answer 9

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

Answer 10

Proprietà box-align CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

Answer 11

Imposta larghezza e imposta margine-sinistra e margine-destra su auto . Questo è solo per orizzontale , però. Se vuoi entrambi i modi, lo faresti in entrambi i modi. Non aver paura di sperimentare; non è che spezzerai nulla.

Answer 12

Di recente ho dovuto centrare un " nascosto " div (ovvero display: none;) con al suo interno un modulo tabulato che doveva essere centrato sulla pagina. Ho scritto il seguente jQuery per visualizzare il div & amp nascosto; quindi aggiorna il CSS alla larghezza generata automaticamente della tabella e modifica il margine per centrarlo. (L'attivazione della visualizzazione viene attivata facendo clic su un collegamento, ma questo codice non era necessario per la visualizzazione.)

NOTA: sto condividendo questo codice perché Google mi ha portato a questa soluzione Stack Overflow & amp; tutto avrebbe funzionato tranne che gli elementi nascosti non hanno alcuna larghezza e amp; non può essere ridimensionato / centrato fino a quando non vengono visualizzati.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Answer 13

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

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

Il div esterno non ha bisogno di proprietà aggiuntive per funzionare.

Answer 14

Per Firefox e Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Per Internet & nbsp; Explorer, Firefox e Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

La proprietà text-align: è facoltativa per i browser moderni, ma è necessaria in Internet & nbsp; Explorer Quirks Mode per il supporto dei browser legacy.

Answer 15

Questa è la mia risposta.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 16

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

Ecco un Fiddle che mostra l'allineamento orizzontale e verticale.

Ulteriori informazioni su Mozilla Developer Network .

Answer 17

Chris Coyier che ha scritto un post eccellente su "Centrare nello sconosciuto "sul suo blog. È un riepilogo di più soluzioni. Ne ho pubblicato uno non pubblicato in questa domanda. Ha più supporto per il browser della 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;
}

Answer 18

Mi rendo conto di essere piuttosto in ritardo nel gioco, ma questa è una domanda molto popolare, e di recente ho trovato un approccio che non ho visto menzionato da nessuna parte 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.

Answer 19

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 molti figli sotto un genitore, il tuo contenuto CSS deve essere così esempio su violino .

L'aspetto del contenuto HTML è simile a questo:

<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 guarda questo esempio sul violino .

Answer 20

Centratura solo in orizzontale

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

Il contenitore:

• 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 violino !

---

Centratura sia orizzontale che amp; verticalmente

Nella mia esperienza, il modo migliore per centrare una casella sia in verticale che in orizzontale è 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 violino !

Answer 21

Il modo più semplice:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 22

Se la larghezza del contenuto è sconosciuta, puoi utilizzare il seguente metodo . Supponiamo di avere questi due elementi:

• .outer - larghezza intera
• .inner - nessuna larghezza impostata (ma è possibile specificare una larghezza massima)

Supponiamo che la larghezza calcolata degli elementi sia rispettivamente 1000px e 300px. Procedere come segue:

1. Avvolgi .inner all'interno di .center-helper
2. Rendi .center-helper un blocco inline; diventa delle stesse dimensioni di .inner rendendolo largo 300 px.
3. Premi .center-helper 50% a destra rispetto al suo genitore; questo pone la sua sinistra a 500 px wrt. esterno.
4. Push .inner 50% rimasto rispetto al suo genitore; questo pone la sua sinistra a -150px wrt. assistente centrale che significa che la sua sinistra è a 500-150 = 350 px wrt. esterno.
5. Imposta l'overflow su .outer su nascosto per impedire la barra di scorrimento orizzontale.

Demo:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}

Answer 23

Puoi fare qualcosa del genere

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Questo allineerà anche #inner verticalmente. Se non si desidera, rimuovere le proprietà display e vertical-align ;

Answer 24

Ecco cosa 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 % );
}

Answer 25

Text-align: center

Applicazione text -align: center i contenuti incorporati sono centrati all'interno della casella. Tuttavia, poiché il div interno ha per impostazione predefinita width: 100% devi impostare una larghezza specifica o utilizzare uno dei seguenti:

• display: block
• display: inline
• display: inline- blocco

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

---

Margine: 0 auto

Utilizzo di margin: 0 auto è un'altra opzione ed è più adatta per la compatibilità dei browser meno recenti. Funziona insieme a display: table .

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

#inner {
  display: inline-block;
}

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

---

Flexbox

display: flex si comporta come un elemento a blocchi e ne definisce il contenuto in base al modello di flexbox. Funziona con justify- contenuto: centro .

Nota: Flexbox è compatibile con la maggior parte dei browser ma non con tutti. Consulta qui per un elenco completo e aggiornato della compatibilità dei browser.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

#inner {
  display: inline-block;
}

---

Trasforma

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

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

<*>

---

< center > (obsoleto)

Il tag < center > è l'alternativa HTML a text-align: center . Funziona su browser meno recenti e la maggior parte di quelli nuovi ma non è considerata una buona pratica poiché questa funzione è obsoleto ed è stato rimosso dagli standard Web.

<*> <*>

Answer 26

Puoi usare display: flex per il tuo div esterno e per centrare orizzontalmente devi aggiungere justify-content: center

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

oppure puoi visitare w3schools - Proprietà flex CSS per ulteriori idee.

Answer 27

Questo metodo funziona anche bene:

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

Per il < div > interno, l'unica condizione è che la sua altezza e larghezza non devono essere più grandi di quelle della sua contenitore.

Answer 28

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

Answer 29

Bene, sono riuscito a trovare una soluzione che forse si adatta a tutte le situazioni, ma utilizza JavaScript:

Ecco la struttura:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Ed ecco lo snippet JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Se si desidera utilizzarlo in un approccio reattivo, è possibile aggiungere quanto segue:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Answer 30

Esisteva un'opzione che ho trovato:

Tutti dicono di usare:

margin: auto 0;

Ma c'è un'altra opzione. Impostare questa proprietà per il div parent. esso funziona perfettamente in qualsiasi momento:

text-align: center;

E vedi, bambino vai al centro.

E infine CSS per te:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}