Come centrare orizzontalmente un <div>


4288

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

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

13
Di quelle grandi risposte, voglio solo evidenziare che devi dare a "#inner" una "larghezza", o sarà "100%", e non puoi dire se è già centrato.
Jony,

Joma Tech mi ha portato qui
Barbu Barbu il

@Barbu Barbu: in che modo? In quale contesto?
Peter Mortensen,

Risposte:


4727

Puoi applicare questo CSS all'interno <div>:

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

Naturalmente, non c'è bisogno di impostare l' widtha 50%. Qualsiasi larghezza inferiore a quella contenuta <div>funzionerà. La margin: 0 autoè quello che fa la centratura effettivo.

Se scegli come target Internet Explorer 8 (e versioni successive), potrebbe essere preferibile avere questo:

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

Renderà l'elemento interno al centro in orizzontale e funziona senza impostare uno specifico width.

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>


12
Per il centraggio verticale di solito uso "line-height" (line-height == height). Questo è semplice e carino, ma funziona solo con un testo di una riga :)
Nicolas Guillaume,

98
Devi usare il tag! DOCTYPE nella tua pagina html per farlo funzionare bene su IE.
Fabio,

15
Nota che potrebbe essere necessario aggiungere "float: none;" per #inner.
Mert Mertce,

15
Puoi anche impostare i margini superiore e inferiore su 0, che non è correlato. Meglio mettere margin-left: auto; margin-right: autopenso.
Emmanuel Touzery,

13
Non necessariamente margin:0 auto: può essere in margin: <whatever_vertical_margin_you_need> autosecondo luogo il margine orizzontale.
YakovL,

1247

Se non vuoi impostare una larghezza fissa all'interno, divpuoi 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ò trasforma l'interno divin un elemento inline che può essere centrato text-align.


13
@SabaAhang la sintassi corretta per questo sarebbe float: none;ed è probabilmente necessaria solo perché #inner ha ereditato floatuno lefto rightda qualche altra parte nel tuo CSS.
Doug McLean,

8
Questa è una bella soluzione. Basta tenere a mente che interno erediterà text-alignquindi si consiglia di impostare di interni text-aligna initialo qualche altro valore.
pmoleri,

bella soluzione penso di sì
simon

381

I migliori approcci 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%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

Flex :

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

Ulteriori informazioni sulla centratura degli elementi figlio

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


25
Assicurati di leggere questa risposta prima di iniziare a implementare questa soluzione.
cimmanon,

4
Safari, fin d'ora, richiede ancora -webkitbandiere per FlexBox ( display: -webkit-flex;e -webkit-align-items: center;e -webkit-justify-content: center;)
Joseph Hansen

Penso sempre che usare un sacco di codice sia una cattiva pratica, ad esempio con questo codice centrare il mio div: display: table; margine: auto; semplice e facile
simon

Sono io o questo frammento di codice non è centrato
Mike

Nel 2020 possiamo usare flexbox caniuse.com/#feat=flexbox
tonygatta

251

Supponi che il tuo div sia largo 200 pixel:

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

Assicurarsi che l'elemento genitore sia posizionato , ovvero relativo, fisso, assoluto o appiccicoso.

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

https://jsfiddle.net/gjvfxxdj/

Con CSS calc () , il codice può diventare ancora più semplice:


.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Il principio è sempre lo stesso; metti l'elemento nel mezzo e compensa la larghezza.


Non mi piace questa soluzione perché quando l'elemento interno è troppo ampio per lo schermo, non è possibile scorrere l'intero elemento in senso orizzontale. margine: 0 auto funziona meglio.
Aloso,

margine sinistro: auto; margine destro: auto; centra un elemento a livello di blocco
killscreen il

La larghezza predefinita per la maggior parte degli elementi a livello di blocco è auto, che riempie l'area disponibile sullo schermo. Solo essere centrato lo posiziona nella stessa posizione dell'allineamento a sinistra. Se desideri che sia centrato visivamente, devi impostare una larghezza (o una larghezza massima sebbene Internet Explorer 6 e precedenti non lo supportino, e IE 7 lo supporta solo in modalità standard).
Killscreen,

228

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 centeranche quando ridimensioni lo schermo.


12
+1 per questo metodo, stavo per rispondere con esso. Si noti che è necessario dichiarare una larghezza sull'elemento che si desidera centrare orizzontalmente (o l'altezza se si centra verticalmente). Ecco una spiegazione esauriente: codepen.io/shshaw/full/gEiDt . Uno dei metodi più versatili e ampiamente supportati per centrare gli elementi in verticale e / o in orizzontale.
stvnrynlds,

6
Non puoi usare il padding all'interno del div, ma se vuoi dare l'illusione usa un bordo dello stesso colore.
Squirrl,

Penso che per far funzionare questo metodo, devi impostare il div e l'altezza del div interno
Nicolas S.Xu,

212

Alcuni poster hanno citato il modo CSS 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 3 usando il 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 */
}

Se hai bisogno di supportare browser più vecchi che usano la sintassi precedente per flexbox, ecco un buon posto in cui cercare.


cosa intendi con "sintassi obsoleta", è deprecata?
Konga Raju,

6
Le specifiche Flexbox sono state sottoposte a 3 importanti revisioni. La bozza più recente è del settembre 2012, che deprezza ufficialmente tutte le bozze precedenti. Tuttavia, il supporto del browser è a macchie (soprattutto vecchi browser Android): stackoverflow.com/questions/15662578/...
cimmanon

Questo ha funzionato per me in Chrome quando la versione di Justin Poliey non ha funzionato.
Vern Jensen,

Non è il "giustificare-contenuto: centro;" per l'allineamento verticale e gli "align-items: center;" per l'allineamento orizzontale?
Wouter Vanherck,

3
@WouterVanherck dipende dal flex-directionvalore. Se è "riga" (impostazione predefinita), quindi justify-content: center; è per l'allineamento orizzontale (come ho già detto nella risposta) Se è "colonna", allora justify-content: center;è per l'allineamento verticale.
Danield,


97

Centrare un div di altezza e larghezza sconosciute

Orizzontalmente e verticalmente. Funziona con browser abbastanza moderni (Firefox, Safari / WebKit, Chrome, Internet Explorer 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 con esso ulteriormente su Codepen o su JSBin .


89

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


49
e se non conosci la larghezza? Dire perché il contenuto è dinamico?
Gman,

larghezza massima? che ne dici?

1
Io uso width: fit-content;e margin: 0 auto. Penso che questo possa funzionare con una larghezza sconosciuta.
Rick,


88

Impostare widthe impostare margin-lefte margin-rightsu auto. Questo è solo per orizzontale , però. Se vuoi entrambi i modi, lo faresti in entrambi i modi. Non aver paura di sperimentare; non è come se tu rompessi qualcosa.


62

Di recente ho dovuto centrare un div "nascosto" (cioè, display:none;) che conteneva un modulo tabulare al suo interno che doveva essere centrato sulla pagina. Ho scritto il seguente codice jQuery per visualizzare il div nascosto e quindi aggiornare il contenuto CSS sulla larghezza generata automaticamente della tabella e modificare il margine per centrarlo. (L'interruttore di visualizzazione viene attivato 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 e tutto avrebbe funzionato tranne che gli elementi nascosti non hanno alcuna larghezza e non possono essere ridimensionati / centrati 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>


59

Il modo in cui lo faccio di solito sta usando 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 farlo funzionare.


Questo potrebbe non funzionare se hai altri div al di sotto del div centrato.
NoChance,

54

Per Firefox e Chrome:

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

Per Internet 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 text-align:proprietà è facoltativa per i browser moderni, ma è necessaria nella modalità Quirks di Internet Explorer per il supporto dei browser legacy.


5
Non è necessario per la proprietà text-align. È completamente non necessario.
Touhid Rahman,

text-align è effettivamente necessario per funzionare in modalità IE quicks, quindi se non ti dispiace aggiungere una piccola espressione per supportare i browser più vecchi, tienilo lì. (IE8 con le regole IE8 e le regole IE7 funzionano entrambe senza allineamento del testo, quindi potrebbe essere solo IE6 e precedenti a essere interessato)
heytools

52

Uso:

#outerDiv {
  width: 500px;
}

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


47

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

Ulteriori informazioni sono disponibili su Mozilla Developer Network .


2
Potrebbero essere necessari anche prefissi dei fornitori:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Skippy le Grand Gourou,

45

Chris Coyier che ha scritto un eccellente post su "Centering in the Unknown" sul suo blog. È un riepilogo di più soluzioni. Ne ho pubblicato uno non pubblicato in questa domanda. Ha un supporto per browser maggiore rispetto alla soluzione Flexbox e non stai utilizzando ciò display: table;che potrebbe danneggiare 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;
}

39

Di recente ho trovato un approccio:

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

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

Entrambi gli elementi devono avere la stessa larghezza per funzionare correttamente.


Basta impostare questa regola per #innersolo: #inner { position:relative; left:50%; transform:translateX(-50%); }. Funziona con qualsiasi larghezza.
Jose Rui Santos,

33

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, quindi il tuo contenuto CSS deve essere come questo esempio su violino .

L'aspetto del contenuto HTML piace 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 vedi questo esempio sul violino .


28

Centratura solo in orizzontale

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

Il container:

  • avrebbe dovuto text-align: center;

La casella del contenuto:

  • avrebbe dovuto 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 in orizzontale che in verticale

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

Il contenitore esterno:

  • avrebbe dovuto display: table;

Il contenitore interno:

  • avrebbe dovuto display: table-cell;
  • avrebbe dovuto vertical-align: middle;
  • avrebbe dovuto text-align: center;

La casella del contenuto:

  • avrebbe dovuto 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 !


27

La via più facile:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>


1
Come osserva il violino, #inner deve avere una larghezza impostata su di esso.
Michael Terry,

#outernon ne ha bisogno width:100%;come <div>sempre lo è per impostazione predefinita width:100%. e text-align:centerinoltre non è affatto necessario.
Mobarak Ali

27

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

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

Supponiamo che la larghezza calcolata degli elementi sia rispettivamente di 1000 pixel e 300 pixel. Procedi come segue:

  1. Avvolgere .innerdentro.center-helper
  2. Crea .center-helperun blocco in linea; diventa delle stesse dimensioni della .innerlarghezza di 300 pixel.
  3. Spingere il .center-helper50% a destra rispetto al suo genitore; questo posiziona la sua sinistra a 500 pixel wrt. esterno.
  4. Spingere il .inner50% a sinistra rispetto al suo genitore; questo posiziona la sua sinistra a -150 pixel wrt. aiuto centrale che significa che la sua sinistra è a 500-150 = 350 pixel wrt. esterno.
  5. Impostare l'overflow su .outernascosto 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>


26

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

Ciò consentirà inoltre di allineare #innerverticalmente. Se non si desidera, rimuovere le proprietà displaye vertical-align;


25

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

3
Questo lo centra verticalmente.
Michael Terry,

22

Allineamento del testo: al centro

L'applicazione text-align: centerdel contenuto incorporato è centrata nella casella della riga. Tuttavia, poiché il div interno ha per impostazione predefinita width: 100%è necessario impostare una larghezza specifica o utilizzare uno dei seguenti:


Margine: 0 auto

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


Flexbox

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

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


Trasformare

transform: translateconsente 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: absolutee left: 50%.


<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 funzionalità è obsoleta ed è stata rimossa dagli standard Web.


22

Puoi usarlo display: flexper il tuo div esterno e per centrare orizzontalmente devi aggiungerejustify-content: center

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

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


21

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

21

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

21

Questo metodo funziona anche bene:

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

Per l'interno <div>, l'unica condizione è che sia heighte widthnon debba essere più grande di quelle del suo contenitore.


19

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. Funziona perfettamente in qualsiasi momento:

text-align: center;

E vedi, bambina, 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 */
}

lavoro di allineamento del testo per l'allineamento del testo nel suo contenitore non per il suo contenitore rispetto al suo genitore.
Lalit Kumar Maurya il

lo provo, ho un problema con impostare il bambino al centro, devo quando hai più di un figlio, più margine di tempo: 0 risposta automatica del font, ma, centro di allineamento del testo, per il genitore rendere questo bambino al centro, anche se sono elementi e non essere testo, prova e guarda cosa succede
Pnsadeghy,

Allinea al centro solo il testo. Hai ragione in questo momento ma quando scrivi un contenitore CSS che contiene un figlio con larghezza e colore diversi il tuo codice non funziona. Provalo di nuovo !!!!
Lalit Kumar Maurya,

Vedi questo esempio jsfiddle.net/uCdPK/2 e dimmi cosa ne pensi !!!!!
Lalit Kumar Maurya,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.