Blocco in linea display centrale CSS?

Ho un codice funzionante qui: http://jsfiddle.net/WVm5d/ (potresti dover ingrandire la finestra dei risultati per vedere l'effetto di allineamento al centro)

Domanda

Il codice funziona bene ma non mi piace averlo display: table;. È l'unico modo in cui potrei rendere il centro di allineamento della classe wrap. Penso che sarebbe meglio se ci fosse un modo per usare display: block;o display: inline-block;. È possibile risolvere il centro di allineamento in un altro modo?

L'aggiunta di un fisso con al contenitore non è un'opzione per me.

Incollerò anche il mio codice qui se il collegamento JS Fiddle si interrompe in futuro:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

La soluzione accettata non funzionerebbe per me in quanto ho bisogno di un elemento figlio che display: inline-blocksia centrato sia orizzontalmente che verticalmente all'interno di un genitore di larghezza del 100%.

Ho utilizzato le proprietà justify-contente di Flexbox align-items, che rispettivamente consentono di centrare gli elementi orizzontalmente e verticalmente. Impostando entrambi centersu genitore, l'elemento figlio (o anche più elementi!) Si troverà perfettamente al centro.

Questa soluzione non richiede una larghezza fissa, che non sarebbe stata adatta per me in quanto il testo del mio pulsante cambierà.

Ecco una demo di CodePen e uno snippet del codice pertinente di seguito:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Prova questo. Ho aggiunto text-align: centera body e display:inline-blockwrap, quindi ho rimosso il tuodisplay: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Se hai un <div>con text-align:center;, qualsiasi testo al suo interno sarà centrato rispetto alla larghezza di quell'elemento contenitore. inline-blockgli elementi vengono trattati come testo per questo scopo, quindi saranno anch'essi centrati.

Puoi anche farlo con il posizionamento, impostare div genitore su relativo e div figlio su assoluto.

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

Non è necessario utilizzare "display: table". Il motivo per cui il tentativo di centraggio automatico del margine: 0 non funziona è perché non hai specificato una larghezza.

Funzionerà perfettamente:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

Non è necessario specificare display: block poiché quel div sarà block per impostazione predefinita. Probabilmente puoi anche perdere l'overflow: hidden.

Simile alla risposta di @ vijayscode, questo centrerà orizzontalmente un elemento inline-block (ma senza la necessità di modificare anche gli stili del suo genitore):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

Ho appena cambiato 2 parametri:

.wrap {
    display: block;
    width:661px;
}

Dimostrazione dal vivo

Ottimo articolo, ho trovato che ciò che ha funzionato meglio per me era aggiungere una% alla dimensione

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Usa solo:

line-height:50px

Sostituisci "50px" con la stessa altezza del tuo div.