CSSセンターはインラインブロックを表示しますか？

ここに作業コードがあります：http : //jsfiddle.net/WVm5d/（中央揃えの効果を確認するには、結果ウィンドウを大きくする必要がある場合があります）

質問

コードは問題なく動作しますが、使用したくありませんdisplay: table;。これは、ラップクラスを中央揃えにする唯一の方法です。display: block;またはを使う方法があればもっといいと思いますdisplay: inline-block;。中心揃えを別の方法で解決することは可能ですか？

コンテナにfixed withを追加することは私には選択肢ではありません。

また、JS Fiddleリンクが将来壊れた場合は、ここにコードを貼り付けます。

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>

display: inline-block100％幅の親内で水平方向と垂直方向の両方に中央揃えする子要素が必要なので、受け入れられたソリューションは私にとっては機能しません。

Flexbox justify-contentとalign-itemsプロパティを使用しました。それぞれ、要素を水平方向と垂直方向の中央に配置できます。両方をcenter親に設定すると、子要素（または複数の要素も！）が完全に中央になります。

このソリューションでは幅を固定する必要はありません。ボタンのテキストが変わるため、これは私には不向きでした。

以下は、CodePenデモと関連するコードのスニペットです。

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

.child {
  display: inline-block;
}

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

これを試して。text-align: centerボディとdisplay:inline-blockラップに追加し、あなたを削除しましたdisplay: table

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

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

<div>with がある場合text-align:center;、その中のテキストは、そのコンテナ要素の幅を基準にして中央揃えになります。inline-block要素はこの目的のためにテキストとして扱われるため、中央にも配置されます。

これを配置で行うこともでき、親divを相対に、子divを絶対に設定します。

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

「display：table」を使用する必要はありません。マージン：0の自動センタリングの試みが機能しない理由は、幅を指定しなかったためです。

これはうまくいきます：

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

そのdivはデフォルトでブロックされるため、display：blockを指定する必要はありません。おそらく、オーバーフローを失う可能性もあります。

@vijayscodeの回答と同様に、これはインラインブロック要素を水平方向に中央揃えにします（ただし、親のスタイルも変更する必要はありません）。

  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

私は2つのパラメータを変更しました：

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

ライブデモ

私にとって最も効果的だったのは、サイズに％を加えることでした。

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

ただ使用する：

line-height:50px

「50px」をdivと同じ高さに置き換えます。