html - CSS でテーブルを垂直方向に揃える方法

Question

cssで画面中央のテーブルを縦に揃えるにはどうすればいいですか?

Answer 1

簡単に言うと、vertical-align は table-cells で機能するため、body を table にするだけです。

body, html { 
  height: 100%; 
}

body { 
  display: table; 
}

#wrapper { 
  display: table-cell; 
  vertical-align: middle;
  height: 80%;
}

これにより、ページラッパーが中央に垂直に配置され、80% 滑らかになります。

Answer 2

一般に、これに沿ったものは、定義された高さを持つブロック要素でうまく機能します。

table { 
 position: absolute;
 top: 50%;
 margin-top: -50%;
}

高さが定義されていないため、ページの中央揃えは難しくなりますが、これでうまくいくと思います。

html {
 height: 100%;
}

ブラウザの違いに遭遇するかもしれませんが、それに応じて行動してください。

Answer 3

テーブルの高さを固定できる場合は、このサイトの CSS を自由に適用してください。

説明するのは少し複雑ですが、基本的には、コンテンツの周囲の画面の 50% の高さに 1 ピクセルの高さの「水平線」を設定し、中央に配置する要素 (つまりテーブル) の上部をその高さの 50% だけオフセットします。

編集:これは、説明とすべてを含む、最初にソリューションを作成した記事です。