Centre CSS afficher le bloc en ligne?

J'ai un code de travail ici: http://jsfiddle.net/WVm5d/ (vous devrez peut-être agrandir la fenêtre de résultat pour voir l'effet d'alignement au centre)

Question

Le code fonctionne bien mais je n'aime pas l'avoir display: table;. C'est la seule façon dont je pouvais faire le centre d'alignement de la classe wrap. Je pense que ce serait mieux s'il y avait un moyen d'utiliser display: block;ou display: inline-block;. Est-il possible de résoudre le centre d'alignement d'une autre manière?

Ajouter un fixe avec au conteneur n'est pas une option pour moi.

Je vais également coller mon code ici si le lien JS Fiddle se casse à l'avenir:

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 solution acceptée ne fonctionnerait pas pour moi car j'ai besoin d'un élément enfant avec display: inline-block à la fois centré horizontalement et verticalement dans un parent de 100% de largeur.

J'ai utilisé Flexbox justify-contentet les align-itemspropriétés, qui vous permettent respectivement de centrer les éléments horizontalement et verticalement. En définissant les deux surcenter sur le parent, l'élément enfant (ou même plusieurs éléments!) Sera parfaitement au milieu.

Cette solution ne nécessite pas de largeur fixe, ce qui n'aurait pas été approprié pour moi car le texte de mon bouton va changer.

Voici une démonstration de CodePen et un extrait du code correspondant ci-dessous:

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

.child {
  display: inline-block;
}

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

Essaye ça. J'ai ajouté text-align: centerau corps et display:inline-blockà envelopper, puis retiré votredisplay: table

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

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

Si vous avez un <div>avec text-align:center;, tout texte à l'intérieur sera centré par rapport à la largeur de cet élément conteneur. inline-blockles éléments sont traités comme du texte à cet effet, ils seront donc également centrés.

Vous pouvez également le faire avec le positionnement, définir parent div sur relatif et enfant div sur absolu.

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

Vous n'avez pas besoin d'utiliser "display: table". La raison pour laquelle votre marge: 0 tentative de centrage automatique ne fonctionne pas est que vous n'avez pas spécifié de largeur.

Cela fonctionnera très bien:

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

Vous n'avez pas besoin de spécifier display: block car ce div sera block par défaut. Vous pouvez aussi probablement perdre le débordement: caché.

Semblable à la réponse de @ vijayscode, cela centrera horizontalement un élément de bloc en ligne (mais sans avoir besoin de modifier également les styles de son parent):

  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

Je viens de changer 2 paramètres:

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

Démo en direct

Excellent article, j'ai trouvé ce qui fonctionnait le mieux pour moi était d'ajouter un% à la taille

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

Utilisez simplement:

line-height:50px

Remplacez "50px" par la même hauteur que votre div.