html - テーブルセルの中央揃え

Question

テーブルセルの方法を使用して、div を垂直方向と水平方向の中央に配置しようとしています。

次のコードを使用すると機能します。

div {
  display: table;
}
.logo {
  display: table-cell;
  position: absolute;
  vertical-align: middle;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

しかし、ここではJSFiddle.logoと呼ばれる別の div でラップしたいのですが、何らかの理由で、JSFiddle では機能しますが、私のサイトでは機能しません。.center

Answer 1

ここが良い出発点です。

HTML:

<div class="containing-table">
    <div class="centre-align">
        <div class="content"></div>
    </div>
</div>

CSS:

.containing-table {
    display: table;
    width: 100%;
    height: 400px; /* for demo only */
    border: 1px dotted blue;
}
.centre-align {
    padding: 10px;
    border: 1px dashed gray;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    vertical-align: top; /* Removes the extra white space below the baseline */
}

デモを参照してください: http://jsfiddle.net/audetwebdesign/jSVyY/

.containing-table.centre-align(テーブルセル)の幅と高さのコンテキストを確立します。

必要に応じて適用text-alignおよびvertical-align変更できます.centre-align。

text-align プロパティを使用して水平方向に中央揃えする場合は、.contentを使用する必要があることに注意してください。display: inline-block

Answer 2

これは、flexbox を使用すると簡単に実行できます。flexbox を使用すると、コンテンツの高さを指定しなくても、コンテンツに含まれる高さに合わせて自動的に調整できます。

デモ

デモの内容はこちら

.container{

  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;

}

html

<div class="container">
  <div class='content'> //you can size this anyway you want
    put anything you want here,
  </div>
</div>