it-swarm.dev

Come centrare orizzontalmente un <div>?

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

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

Puoi applicare questo CSS al <div> interno:

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

Naturalmente, non è necessario impostare width su 50%. Funzionerà qualsiasi larghezza inferiore al <div> che contiene. Il margin: 0 auto è ciò che fa il centraggio effettivo.

Se stai prendendo di mira IE8 +, potrebbe essere meglio avere questo invece:

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

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

Esempio di lavoro qui:

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

4316
Justin Poliey

Se non si desidera impostare una larghezza fissa sul div interno si potrebbe 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 div interno un elemento in linea che può essere centrato con text-align.

1160
Alfred

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 utilizzare 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 sul centraggio degli elementi figlio

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

329
Konga Raju

Supponiamo che il tuo div sia 200px wide:

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

Assicurati che l'elemento genitore sia posizionato vale a dire relativo, fisso, assoluto o appiccicoso.

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

https://jsfiddle.net/gjvfxxdj/

231
nuno_cruz

Ho creato questo example per mostrare come vertically e horizontallyalign.

Il codice è fondamentalmente questo:

#outer {
  position: relative;
}

e...

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

e rimarrà in center anche quando ridimensiona il tuo schermo.

210
Tom Maton

Alcuni poster hanno menzionato il metodo 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 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 flexbox ecco un buon posto dove guardare.

175
Danield

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;
}
127
Salman Abbas

La proprietà box-align di CSS3

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

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

79
gizmo

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

78
Sneakyness

Centratura di un div di altezza e larghezza sconosciute

Orizzontalmente e verticalmente. Funziona con browser ragionevolmente 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>

Tinker con esso più avanti Codepen o on JSBin .

77
iamnotsam

Recentemente ho dovuto centrare un div "nascosto" (es. Display: none;) che conteneva al suo interno una tabella che doveva essere centrata sulla pagina. Ho scritto il seguente jQuery per visualizzare il div nascosto e poi aggiornare il CSS alla larghezza generata automaticamente della tabella e cambiare 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 in 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>

55
James Moberg

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.

49
william44isme

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

48
ch2o

Questa è la mia risposta.

#outerDiv {
  width: 500px;
}

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

43
Ankit Jain

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

Maggiori informazioni sono disponibili su Mozilla Developer Network .

39
Kilian Stinson

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 utilizzando 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;
}
38
Willem de Wit

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.

33
BenjaminRH

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 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 su fiddle .

28
Lalit Kumar

La via più facile:

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

25
joan16v

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

Secondo la mia esperienza, il modo migliore per centrare una casella both verticalmente e orizzontalmente è di 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 !

25
John Slegers

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

Puoi fare qualcosa di simile

#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 vuoi, rimuovi le proprietà display e vertical-align;

22

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

  • .outer: larghezza completa
  • .inner: nessuna larghezza impostata (ma è possibile specificare una larghezza massima)

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

  1. Avvolgi .inner all'interno di .center-helper
  2. Crea .center-helper un blocco in linea; diventa la stessa dimensione di .inner rendendolo largo 300 px.
  3. Premi .center-helper al 50% a destra rispetto al suo genitore; questo pone la sua sinistra a 500px wrt. esterno.
  4. Premi .inner 50% a sinistra rispetto al suo genitore; questo pone la sua sinistra a -150px wrt. helper centrale che significa che la sua sinistra è a 500 - 150 = 350px wrt. esterno.
  5. Imposta 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%;
}
21
Salman A

Allineamento del testo: centro

Applicando text-align: center i contenuti in linea sono centrati all'interno della casella di riga. Tuttavia dal momento che il div interno ha per default 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

Usare margin: 0 auto è un'altra opzione ed è più adatto per la compatibilità con i browser più vecchi. Funziona insieme a 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 in base al modello di flexbox. Funziona con justify-content: center .

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

#inner {
  display: inline-block;
}

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


Trasformare

transform: translate consente 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 è obsoleta ed è stata rimossa dagli standard Web.

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

21
Paolo Forgia

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 di 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);
  })
});
19
Miguel Leite

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à CSS flex per altre idee.

19
Milan Panigrahi

Esisteva un'opzione che ho trovato:

Tutti dicono di usare:

margin: auto 0;

Ma c'è un'altra opzione. Imposta questa proprietà per il div padre. Itworks funziona perfettamente in qualsiasi momento:

text-align: center;

E vedi, il bambino va al centro.

E infine i 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 */
}
18
Pnsadeghy

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

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 height e width non devono essere più grandi di quelli del suo contenitore.

18
Billal Begueradj

Prova a giocare con 

margin: 0 auto;

Se vuoi centrare il tuo testo, prova a utilizzare:

text-align: center;
17
user1817972

Se qualcuno desidera una soluzione jQuery per centrare allineare questi div:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
17
sarath

puoi semplicemente usare flexbox come questo:

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

Applica Autoprefixer per tutto il supporto del browser:

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

O ALTRO

usa trasforma :

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

con Autoprefixer:

#inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%)
}
7
Shashin Bhayani

CSS 3:

È possibile utilizzare il seguente stile sul contenitore padre per distribuire gli elementi figlio in modo uniforme orizzontalmente:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

A Nice DEMO riguardante i diversi valori per justify-content.

 Enter image description here

CanIUse: Compatibilità browser

Provalo!:

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

7
Legends

Ho applicato lo stile in linea al div interno. Usa questo. 

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

Puoi ottenerlo utilizzando la CSS Flexbox. Hai solo bisogno di applicare 3 proprietà all'elemento genitore per far funzionare tutto.

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

Dai un'occhiata al codice sottostante per capire meglio le proprietà.

Scopri di più su CSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

6
Saurav Rastogi

La cosa bella che ho trovato recentemente, mescolando l'uso di line-height + vertical-align e il 50% trucco sinistro, è possibile center una scatola di dimensioni dinamiche all'interno di un'altra scatola di dimensioni dinamiche, sia in orizzontale che in verticale usando puro CSS. 

Nota che devi usare span (e inline-block), testato nei browser moderni + IE8 .HTML:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS:

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

Vedi esempio qui

6
Josh Mc

Che ne dici del seguente CSS per #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

Per lo più uso questo CSS per centrare le div.

5
Rajesh

Centra un div in un div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>

3
antelove

Rendilo semplice!

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

Io uso solo la soluzione più semplice, ma funziona su tutti i browser:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
3
Gerald Goshorn

Uso:

<div id="parent">
  <div class="child"></div>
</div>

Stile:

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

Se vuoi centrarlo orizzontalmente, devi scrivere come segue:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
3
Руслан

È possibile usare CSS 3 flexbox . Hai due metodi quando usi la scatola flessibile.

  1. Imposta il display:flex; genitore e aggiungi le proprietà {justify-content:center; ,align-items:center;} al tuo elemento genitore.

#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

  1. Imposta il genitore display:flex e aggiungi margin:auto; al figlio.

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

3
Dream Hunter

Può anche essere centrato orizzontalmente e verticalmente usando il posizionamento assoluto, come questo:

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
3
Agu Dondo

Puoi usare la flexbox.

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

Puoi saperne di più su questo link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3
Cyan Baltazar

Volevo rispondere a questo perché ho notato che nessuno ha menzionato il metodo calc. L'utilizzo è per il div che stai centrando, se ne conosci la larghezza, diciamo che è 1200 pixel, scegli:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Quindi fondamentalmente aggiungerà un margine sinistro del 50% meno la metà della larghezza conosciuta.

2
serdarsenay

Il modo più conosciuto che è ampiamente utilizzato e funziona in molti browser inclusi quelli vecchi, utilizza margin come di seguito:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}
<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Esegui il codice per vedere come funziona, inoltre ci sono 2 cose importanti che non dovresti dimenticare nel tuo CSS quando provi a centrare in questo modo: margin: 0 auto; che lo rende il centro div come desiderato, inoltre non dimenticare width del bambino , altrimenti non sarà centrato come previsto! 

2
Alireza
.outer
{
  background-color: rgb(230,230,255);
  width 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}
<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>
2
pavelbere

A partire dal 2019, dato che questa domanda ottiene ancora molti successi, una risposta molto semplice e incrociata al centro orizzontale consiste nell'applicare questa regola all'elemento genitore:

.parentBox {
 display: flex;
 justify-content: center
}
2
Ady Ngom

Ecco un altro modo per centrare orizzontalmente usando flexbox e senza specificare alcuna larghezza al contenitore interno. L'idea è di usare pseudo elementi che spingeranno il contenuto interno da destra e da sinistra.

Usando flex:1 su uno pseudo elemento, farai riempire gli spazi rimanenti e prenderanno le stesse dimensioni e il contenitore interno verrà centrato.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Possiamo anche considerare la stessa situazione per l'allineamento verticale semplicemente cambiando la direzione del flex alla colonna:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

2
Temani Afif

Questo centralizza il tuo div interno in senso orizzontale e verticale:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

Solo per l'allineamento orizzontale, cambia

margin: 0 auto;

e per verticale, cambia

margin: auto 0;
1
Shivam Chhetri

CSS

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

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
1
Abdul Ghaffar

Dopo aver letto tutte le risposte non ho visto quello che preferisco. È così che puoi centrare un elemento in un altro. 

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

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

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}
1
Mardok

Puoi aggiungere questo codice:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Rafiqul Islam

A seconda delle circostanze, la soluzione più semplice potrebbe essere:

margin:0 auto; float:none;
1
Justin Munce

Risposta più semplice add margin: auto; all'interno.

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

codice CSS

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

controlla il mio link codepen http://codepen.io/feizel/pen/QdJJrK

 enter image description here

1
Faizal Munna

Assegna width al div interno e aggiungi margin:0 auto; nella proprietà CSS.

1
Mr.Pandya

Uso:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
1
SUNIL KUMAR E.U

Sì, questo è un codice breve e pulito per l'allineamento orizzontale. Spero che questo codice ti piaccia.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
1
Banti Mathur

Usa il codice qui sotto.

HTML

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

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
1
Faizal

Usa questo codice:

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
1
Husain Ahmed

Puoi farlo comprare con flex-box che strega è una buona tecnica in questi giorni ..__ Per l'uso di flex-box dovresti dare display: flex; e align-items: center; al tuo genitore o #outer elemento div. Il codice dovrebbe essere così:

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

Questo dovrebbe centrare il tuo bambino o #inner div orizzontalmente. Ma non puoi vedere alcuna modifica. Poiché il nostro #outer div non ha altezza o in altre parole, la sua altezza è impostata su auto, quindi ha la stessa altezza di tutti i suoi elementi figli. Quindi, dopo un po 'di stile visivo, il codice del risultato dovrebbe essere così:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Puoi vedere #inner div è ora centrato. Flex-box è il nuovo metodo per posizionare gli elementi in stack orizzontali o verticali con CSS e ha il 96% della compatibilità globale dei browser. Quindi sei libero di usarlo e se vuoi saperne di più su Flex-box visita CSS-Tricks article, questo è il posto migliore per imparare usando Flex-box secondo me.

1
Morteza Sadri

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>

1
Qmr

È così semplice.

Decidi solo quale larghezza vuoi dare al div interno e usa il seguente CSS.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}
1
Gaurav Aggarwal

Questo sicuramente centrerà il tuo #inner sia orizzontalmente che verticalmente. Questo è anche compatibile con tutti i browser. Ho appena aggiunto uno stile in più solo per mostrare come è centrato.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Ma ovviamente se lo vuoi solo allineato orizzontalmente, questo può aiutarti.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

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

1
Mark Salvania

Puoi usare una riga di codice, solo text-align:center.

Ecco un esempio:

#inner {
  text-align:center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

1
Yahya Essam

Uno dei modi più semplici che puoi fare è usare display: flex. Il div esterno deve solo avere flex di visualizzazione e l'interno necessita di margin: 0 auto per renderlo centrato orizzontalmente.

Per centrare verticalmente e centrare un div all'interno di un altro div, per favore guarda i commenti della classe .inner qui sotto

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}
<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

1
drewkiimon
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}
1
Majid Sadr

Mi dispiace, ma questo bambino degli anni '90 ha appena lavorato per me:

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

Sto andando all'inferno per questo peccato?

1
Heitor

Il meglio che ho usato nei miei vari progetti è 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

collegamento di violino

1
Jaison

Potremmo usare la prossima classe CSS che consente di centrare verticalmente e orizzontalmente qualsiasi elemento rispetto al suo genitore:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
Elias MP

HTML:

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

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

0
Fahad Uddin

Il modo migliore è usare il display tabella-cella (interno) che viene esattamente dopo un div con la tabella di visualizzazione (esterno) e impostare l'allineamento verticale per il div interno (con display cella-tabella) e ogni tag che si usa nel div interno al centro di div o pagina.

Nota: è necessario impostare un'altezza specificata all'esterno

È il modo migliore che conosci senza posizione relativa o assoluta e puoi utilizzarlo in ogni browser come lo stesso.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

0
hossein ghaem

Invece di più wrapper e/o margini automatici, questa semplice soluzione funziona per me:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Mette il div al centro della vista (verticale e orizzontale), le dimensioni e regola la dimensione, centra l'immagine di sfondo (verticale e orizzontale), centra il testo (orizzontale) e mantiene div nella vista e in cima al contenuto. Basta inserire in HTML body e divertirsi.

0
Cees Timmerman

Prova questo:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}
0
Ajay Gupta

questo ha funzionato per me:

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

In questo codice, devi determinare la larghezza dell'elemento.

Ho trovato simile con margin-left, ma può essere anche left.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}
0
iorgu

Aggiungi CSS al tuo div interno. Imposta margin: 0 auto e imposta la sua larghezza inferiore al 100%, che è la larghezza del div esterno.

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>

Questo darà il risultato desiderato.

0
Joseph

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

0
Anu

So che sono un po 'in ritardo per rispondere a questa domanda, e non mi sono preso la briga di leggere ogni singola risposta in modo che questo possa essere un duplicato. Ecco il mio take :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
0
#inner {
  width: 50%;
  margin: 0 auto;
}
0
Javed Khan

Semplicemente Margin:0px auto:

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

0
Sankar

Aggiungi text-align:center; a padre div 

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

0
Friend

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

0
Galarist

Gli attributi principali per centrare il div sono margin: auto e width: in base ai requisiti:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
0
Anu
div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

per la cosa normale se si utilizza il modo div statico

se vuoi div in essere centrato quando div è assoluto per il suo genitore ecco un esempio:

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}

Puoi farlo in un modo diverso. Guarda gli esempi qui sotto:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
0

Prova questo:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
0
hossein ketabi

Prima di tutto: devi dare una larghezza al secondo div:

Per esempio:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

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

Nota che se non gli dai una larghezza, occuperà tutta la larghezza della linea.

0
user3968801