divの中央にテーブルを水平および垂直に配置する方法

134

いい<div>ねの背景画像として画像を設定できます：

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

<div>縦横の中央にテーブルを設置する必要があります。を使用したクロスブラウザソリューションはありCSSますか？

css 
— ムー
ソース

回答:

276

センタリングは、CSSの最大の問題の1つです。ただし、いくつかのトリックが存在します。

テーブルを水平方向に中央揃えにするには、左マージンと右マージンをautoに設定できます。

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

垂直方向に中央揃えにするには、JavaScriptを使用するのが唯一の方法です。

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

いいえvertical-align:middleテーブルは、ブロックではなくインライン要素であるように可能です。

編集する

これは、CSSセンタリングソリューションをまとめたWebサイトです。http：//howtocenterincss.com/

— ldiqual
ソース
7
愚かなテーブル。おかげで、これ（margin：0 auto）も役に立ちました。
— Cesar
1
testHeightここは何ですか？
— Ajay Kulkarni 2015
1
@AjayKulkarni #test要素の高さ。混乱させて申し訳ありません。
— ldiqual 2015
1
ええ、私はそれを理解しました... 他の人が理解できるようjavascriptにjQuery、AJAXなどを詳しく説明してください
— Ajay Kulkarni
1
ちょうど私が必要なもの！私は数時間パッドとマージンをいじっています！
— chfw
29

これが私のために働いたものです：

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

#table {
  align-self: center;
}

そして、これはそれを垂直方向と水平方向に揃えました。

— jdlin
ソース
3
これが最良の答えです。
— リオピエドラ
14

水平方向の中央に配置するには、言うことができますwidth: 50%; margin: auto;。私の知る限り、それはクロスブラウザです。垂直方向の配置については、を試すことができますがvertical-align:middle;、テキストに対してのみ機能する場合があります。しかし、試してみる価値はあります。

— redbmk
ソース
6

に追加margin: 0 auto;するだけtableです。にプロパティを追加する必要はありませんdiv

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>
スニペットを展開

注：テーブルの中央への配置を視覚化するために背景色をdivに追加しました

— ガウラヴス
ソース
6

さらに、水平方向と垂直方向の両方の中央に配置したい場合- フロー設計ではなく（そのような場合、前のソリューションが適用されます） -次のようにすることができます。

  1. メインdivをabsoluteor relativeポジショニングとして宣言します（私はと呼びますcontent）。
  2. テーブルを実際に保持する内部divを宣言します（私はそれをと呼びますwrapper）。
  3. wrapperdiv 内でテーブル自体を宣言します。
  4. CSS変換を適用して、ラッパーオブジェクトの「登録ポイント」をその中心に変更します。
  5. ラッパーオブジェクトを親オブジェクトの中央に移動します。

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }
<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>
スニペットを展開

注：このスタイルはテーブルでは直接機能しないため、ラッパーdivを削除することはできません。そのため、divを使用してラップし、配置します。

— ルイス・マスエリ
ソース
5

次のテクニックを使用して、ボックスを垂直方向と水平方向の両方に中央揃えできます。

外側のコンテナ：

  • すべきだった display: table;

内部コンテナ：

  • すべきだった display: table-cell;
  • すべきだった vertical-align: middle;
  • すべきだった text-align: center;

コンテンツボックス：

  • すべきだった display: inline-block;

この手法を使用する場合は、テーブルを（他のコンテンツと一緒に）コンテンツボックスに追加します。

デモ ：

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    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">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>
スニペットを展開

このフィドルも参照してください！

— ジョン・スレガーズ
ソース
1

含める必要があることを発見しました

body { width:100%; }

「マージン：0自動」がテーブルで機能するため。

— 敵
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.