1367

divCSSを使用して垂直方向に中央揃えにします。テーブルやJavaScriptは必要ありませんが、純粋なCSSだけが必要です。いくつかの解決策を見つけましたが、それらのすべてにInternet Explorer 6のサポートがありません。

<body>
    <div>Div to be aligned vertically</div>
</body>

divInternet Explorer 6を含むすべての主要なブラウザーで垂直方向に中央揃えするにはどうすればよいですか？

— ブラク・エルデム
ソース

25

@MarcoDemaio tablesここのレイアウトについて人々は常に不快に思ってはいけませんか？

— Chud37 2013年

14

@ Chud37：それはあなたが何をしなければならないかによりますが、レイアウト用のテーブルは一般に用途が広くなく、コードを入力するのに時間がかかります。は異なります。完全なクロスブラウザテーブルで達成できるこのような単純なタスクに数十のcssのヒントを使用することは、ドアを使用する代わりに窓から家に入ろうとするようなものです。

— Marco Demaio 2013年

人々が古いブラウザのサポートを気にしない場合：davidwalsh.name/css-vertical-center

— KarolisŠarapnickisSep

1

css-vertical-center.comブラウザーの互換性情報を含むいくつかのソリューションがあります

— EscapeNetscape

2

これを行うにはたくさんの方法がありますcss-tricks.com/centering-css-complete-guide

— Michael

1374

以下は、固定幅のフレキシブルな高さのコンテンツボックスを垂直方向および水平方向の中央に配置するために構築できる最高のオールラウンドソリューションです。Firefox、Opera、Chrome、Safariの最新バージョンでテストされ、機能しています。

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

スニペットを展開

動的コンテンツの実際の例を見る

私は柔軟性をテストするためにいくつかの動的コンテンツを組み込んでおり、誰かがそれで何か問題を見つけたかどうか知りたいです。中央に配置されたオーバーレイ（ライトボックス、ポップアップなど）でもうまく機能するはずです。

— ビルバッド
ソース

「絶対」外部DIVがない場合、ページ全体のコンテンツがブロック全体を押し下げます。これにより、他のページコンテンツからの独立性が向上します。

— Billbad

9

.outer {position:absolute;width:100%;height:100%}必要はありません。これらは単に説明するためのものです。私たちが必要とするすべてがあるdisplay:table、私があったように誰もが混同されている場合、。

— 顔のない

スクロールバーを回避するには、99％が必要であることに気付きました。さらに重要なことは、最初の2つのdiv要素を持つこの作品は、キープ言う.outerと、middleそしてはっきり無視.innerし、そのスタイルを。要素の水平方向の中央に配置されないので、auto margin-leftにmargin-right設定したポイントが何であるかわかりません。

— user10089632 2017年

を削除width: 100%;して追加margin: 0 autoすると、.outer幅も可変になります。

— rococo

@ user10089632いいえ、幅や高さの問題ではなく、位置の問題です。top: 0; left 0;少なくとも1のデフォルトを設定Chromeで、不足している

— のMichałWoliński

280

リストに表示されないもう1つ：

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

クロスブラウザ（Internet Explorer 8-Internet Explorer 10を含む、ハックなし！）
パーセンテージと最小/最大の応答性
パディングに関係なく中央揃え（ボックスサイズなし）！
height宣言する必要があります（可変高さを参照）
overflow: autoコンテンツの流出を防ぐための推奨設定（オーバーフローを参照）

_{出典：CSSの絶対水平および垂直センタリング}

— イセラ
ソース

7

これは私のために働いたが、私はいくつかの理由のためにクロムにおける一定の幅と高さを持つことが必要

— ライアン鐘

1

ありがとうございました。pxの高さまたは幅を計算する必要がない修正が必要でしたが、これは完全に機能しました。

— GFoley83 2014年

8

特に親divを必要としないため、

— 優れた

1

それ以外は、高さが固定されていない場合、これはストレッチします：素晴らしい解決策

— Bart Burg

幅と高さが100％でない場合は、margin: auto;

— Charles L.

253

最も簡単な方法は、次の3行のCSSです。

1）位置：相対的;

2）上：50％;

3）変換：translateY（-50％）;

次に例を示します。

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

スニペットを展開

— DrupalFever
ソース

4

注：外側のdivの高さが「min-height：170px」で設定されている場合、正しく機能しません

— Bart Burg

3

z-indexに干渉します

— ripper234 2016年

4

ときは動作しませんheight外でのdivです100%。次に、でのみ機能しposition: absolute;ます。

— Arch Linux Tux 2018

1

私は最初に他の場所でこの解決策を見つけましたが、このメソッドをphantomjsで動作-webkit-transformさせるために必要な、特にバリアントについて言及するためのこの特定の回答に対する追加の賞賛...

— drmrbrewer 2018年

2

これが最良の答えです。これは信じられないほどシンプルで、既存の作業が最小限であり、IE9までさかのぼって機能し、誰も使用しなくなっています。この男にもう少し投票してもらいましょう！

— Nick Steele

136

実際、垂直方向の中央揃えには2つのdivが必要です。コンテンツを含むdivには幅と高さが必要です。

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

スニペットを展開

これが結果です

— ヴァディム・オヴチンニコフ
ソース

4

それは古いトリックです...トップ50％と上部マージンは内側のdivの高さの半分マイナス

— Manatax

34

これは、divの高さが固定されていることを前提としています。divが高さを変更できる場合は機能しません。

— Andre Figueiredo 2013

116

現在、フレックスボックスソリューションは最新のブラウザにとって非常に簡単な方法であるため、これをお勧めします。

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}

<div class="container">
    <div>Div to be aligned vertically</div>
</div>

スニペットを展開

— サントシュ・カルセ
ソース

1

がある場合はnavbar、高さを調整するheight: calc(100% - 55px)か、高さを調整できますnavbar。

— エイドリアン

私はまた、身体からマージン/パディングを削除する必要がありました

— ベン

でうまく動作しfloatます。ありがとう。

— アミールA.シャバニ

これは「新しい古い」モバイルサファリブラウザでは奇妙に動作する可能性があることに注意してください。高さの代わりに推奨される使用法は、.containerクラスのフレックスベース

— Nine Magics

78

Edit 2020：IE8のような古いブラウザーをサポートする必要がある場合にのみこれを使用してください（これは拒否する必要があります😉）。そうでない場合は、フレックスボックスを使用します。

これは私が見つけた最も簡単な方法であり、私はいつもそれを使用しています（jsFiddleデモはこちら）

この記事については、CSS TricksのChris Coyierに感謝します。

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

スニペットを展開

サポートはIE8から始まります。

— アーメルラルシエ
ソース

古いブラウザのサポートを拒否した私にとっての解決策は、フレックスボックスではなくグリッドシステムでした。コンテナーのコンテンツを中央に配置するのは少し面倒でしたが、高さが小さすぎるとスクロールバーを表示する必要があり、中央に配置されたコンテンツが他のすべての方法でスクロール領域から外れていました。コンテナーでは、次のように使用します：{display：grid; align-items：center; これが誰かを助けることを願っています。

— tomasofen

63

たくさんの研究の末、ようやく究極の解決策を見つけました。フロート要素でも機能します。ソースを表示

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

— ymakux
ソース

4

コンテナ要素が暗黙的または明示的な高さを持っている必要があることを覚えていれば、これは本当にうまくいきます。jsfiddle.net/14kt53un CSSに比較的慣れていない人にとっては、ちょっとした落とし穴。

— Martyn Shutt、2015

6

すべての答えのうち、これが最も簡単です！他の人にもあなたの答えを見てもらいたいです！ありがとうございました！ちなみに50%私のために働いた（ではなく-50%）

— Codesee

それはすごかった。何時間もの検索の後、これは私のために働いた。translateY（50％）を使用する必要があった理由は確かですが、うまくいきました。私の場合、親はAEM Forms Engineによって作成され、特定の子要素しか制御できません。

— タレカフ

41

フレックスボックスソリューション

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

スニペットを展開

— レジーピンカム
ソース

3

メモ justify-content: centerはアイテムを水平方向にも中央揃えにします

— Peter Berg

36

divをページの中央に配置するには、フィドルリンクを確認します。

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

スニペットを展開

別のオプションは、フレックスボックスを使用することです。フィドルリンクを確認してください。

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

スニペットを展開

別のオプションは、CSS 3変換を使用することです。

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

スニペットを展開

— ナードロイド
ソース

3

@ArmelLarcier不正解です。相対単位は、パーセント%、ems、remsです。絶対値または固定値は、ピクセルまたはポイントです。あなたが言及しているのは「宣言された高さでのみ機能する」です。ただし、Moesで説明されているこの方法では高さが必要ですが、相対単位で宣言する場合は、中央に配置されたDIVの内側にコンテンツがどの程度含まれていても、DIVがコンテンツに合わせて垂直方向に拡大します。それがこの方法の優れた点です。他の良い点は、誰かがそれらのブラウザをサポートする必要がある場合に備えて、この方法がIE8 / 9/10で機能することです。

— Ricardo Zea 2015年

@ricardozea頑固にプレイするつもりはありませんが、中央に配置されたdivは垂直に拡張され、垂直に中央に配置されたままであると言うのは間違っています。それを試してみてください。高さを「固定」する必要があると私が言うとき、それは正しい言葉ではないことを知っています。それは確かに、その親に対して相対的です。とにかく、Chris Coyerの方法はより理にかなっていると思います。私の答えを参照してください。

— Armel Larcier、2015年

1

@ArmelLarcierそれはすべて良いです。間違いない兄弟です。試してみてください：codepen.io/shshaw/pen/gEiDt-緑のボックスに段落を追加してください;]。確かに、それはModernizrを使用して効果を達成しますが、全体としては実行可能です。私はあなたの答えとCSS-Tricks.comの投稿も見ましたが、その方法は私を満足させません。余分なマークアップを使用し、CSSは冗長すぎます。最良の解決策は、フレックスボックスまたはtransform: translate(-50%, -50%);テクニックを使用することです。IE8の場合は、上/中央揃えのままにして、次に進みます。

— Ricardo Zea

1

@ricardozeaリンク先のコードペンは「display：table」メソッドと追加のマークアップを使用しているので、驚くことはありません。とにかく、あなたの最後の文に+1。

— Armel Larcier、2015年

23

最も簡単な解決策は次のとおりです。

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

スニペットを展開

— ヴァルシャダッジ
ソース

2

確かに最も簡単な方法です:)でも、スタイルをbodyではなくouter-divに設定する必要がありました。

— baburao

21

残念ながら、驚くべきことではありませんが、このソリューションは、思ったよりも複雑です。また、残念ながら、垂直方向に中央揃えにしたいdivの周りに追加のdivを使用する必要があります。

Mozilla、Opera、Safariなどの標準に準拠したブラウザの場合、外側のdivをテーブルとして表示し、内側のdivをテーブルセルとして表示するように設定する必要があります。Internet Explorerの場合、内側のdivを外側のdiv内に完全に配置し、上部を50％に指定する必要があります。次のページでは、この手法について詳しく説明し、いくつかのコードサンプルも提供しています。

CSSの垂直方向の中央揃え
~~高さが不明なCSSの垂直方向の中央揃え（Internet Explorer 7互換）~~（現在は使用されていません）
高さが不明なCSSの垂直方向の中央揃え（Internet Explorer 7互換）（Wayback Machine提供のアーカイブ記事）

JavaScriptを使用して垂直方向の中央揃えを行う手法もあります。JavaScriptとCSSを使用したコンテンツの垂直方向の配置がそれを示しています。

— SID
ソース

20

誰かがInternet Explorer 10（およびそれ以降）のみに関心がある場合は、次を使用しますflexbox。

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}

<div class="parent">
    <div class="centered"></div>
</div>

スニペットを展開

フレックスボックスのサポート：http ://caniuse.com/flexbox

— ブレイブディック
ソース

Android <4.4はサポートしていませんalign-items: center;。

— アンドレ・フィードラー

実際には、align-itemsをサポートしています。 caniuse.com/#search=align-items

— t.mikael.d

@ t.mikael.dその表をよく見てください。Android <4.4の場合、「古いflexbox仕様のみをサポートし、ラッピングはサポートしていません」と記載されています。

— Nathan Osman

15

要素を垂直方向に中央揃えする最新の方法は、を使用することflexboxです。

あなたは身長を決める親と中央に置く子供が必要です。

次の例では、divをブラウザー内の中央に配置します。どのような（私の例では）重要なのは設定しているheight: 100%にbodyしてhtml、その後、min-height: 100%あなたのコンテナに。

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

スニペットを展開

— マーウェルン
ソース

14

垂直方向のみの中央揃え

Internet Explorer 6と7を気にしない場合は、2つのコンテナーを使用する手法を使用できます。

外側のコンテナ：

すべきだった display: table;

内部コンテナ：

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

コンテンツボックス：

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

幅や高さを気にすることなく、必要なコンテンツをコンテンツボックスに追加できます。

デモ：

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.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">
        Malcolm in the Middle
     </div>
   </div>
</div>

スニペットを展開

こちらのフィドルもご覧ください！

水平方向および垂直方向の中央揃え

水平方向と垂直方向の両方で中央揃えにしたい場合は、以下も必要です。

内部コンテナ：

すべきだった text-align: center;

コンテンツボックス：

テキストを中央揃えにしたくない場合は、水平方向のテキストの配置を、たとえばtext-align: left;またはtext-align: right;に再調整する必要があります

デモ：

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

スニペットを展開

こちらのフィドルもご覧ください！

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

13

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

スニペットを展開

CSSグリッド

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

<div>Div to be aligned vertically</div>

スニペットを展開

— アンディ・ホフマン
ソース

5

初心者の方はお試しください

display: flex;
align-items: center;
justify-content: center;

— ウスマンI
ソース

1

追加してくださいスタックスニペット、このCSSコードがどのように示す垂直方向に整列しますdiv。

— 異端者の猿

これも機能します <div style="display:flex"><div style="margin:auto">Inner</div></div>

— idrisadetunmbi

アイテムを揃えてコンテンツを正当化するこの素晴らしい説明に出会いました。読む必要があります：stackoverflow.com/questions/42613359/...

— ウスマンI

4

Billbadからの回答は、.innerdivの固定幅でのみ機能します。このソリューションtext-align: centerは、.outerdivに属性を追加することで動的な幅で機能します。

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

スニペットを展開

— ルーウェン
ソース

面白い！私はほとんど同じテクニックを使用しています！- > stackoverflow.com/questions/396145/...

— ジョンSlegers

4

を使用した3行のコードはtransform、最新のブラウザとInternet Explorerで実質的に機能します。

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

この回答の以前のバージョンでいくつかの不完全性を見つけたので、この回答を追加します（そして、スタックオーバーフローではコメントを付けることができません）。

現在のdivが本体にあり、コンテナーdivがない場合、相対的な「位置」はスタイルを混乱させます。ただし、「修正済み」は機能するようですが、ビューポートの中央のコンテンツを修正します
また、いくつかのオーバーレイdivを中央に配置するためにこのスタイルを使用しましたが、Mozillaでは、この変換されたdiv内のすべての要素が下の境界線を失っていました。おそらくレンダリングの問題です。しかし、それらのいくつかに最小限のパディングを追加するだけで正しくレンダリングされました。ChromeとInternet Explorer（驚くべきことに）はパディングの必要なしにボックスをレンダリングしました

— MandarK
ソース

3

次のリンクは、CSSの3行だけで簡単に実行できる方法を示しています。

CSSの3行だけで縦方向に何でも揃えます。

クレジット：セバスチャンEkström。

私は質問がすでに答えを持っていることを知っていますが、私はその単純さのためにリンクで実用性を見ました。

— ヒカロ
ソース

3

ブラウザーの互換性については回答していませんが、新しいグリッドとそれほど新しいFlexbox機能についても言及しています。

グリッド

From：Mozilla-グリッドのドキュメント-Divを垂直に配置

ブラウザーサポート：グリッドブラウザーサポート

CSS：

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML：

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

フレックスボックス

ブラウザーサポート：Flexboxブラウザーサポート

CSS：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

— ctekk
ソース

3

フレックスボックスを使用せずに、すべてのブラウザーに確実な解決策-「align-items：center;」display：tableとvertical-align：middle;の組み合わせです。

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣デモ：https ://jsfiddle.net/6m640rpp/

— マーティン・ワンケ
ソース

2

私はこれでそれを行いました（それに応じて幅、高さ、マージン上部、マージン左を変更してください）：

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

— Netuddki
ソース

これは、中心に配置しようとしているDIVの幅と高さがわかっている場合にのみ有効です。これは質問の答えではありません

— egr103

2

flexboxを使用すると、コンテンツを簡単に中央に配置できます。次のコードは、コンテンツを中央に配置する必要があるコンテナのCSSを示しています。

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

— マヘンドラリヤ
ソース

2

特に、相対的な（不明な）高さを持つ親divの場合、不明なソリューションのセンタリングは私にとってはうまく機能します。この記事には、本当にすばらしいコード例がいくつかあります。

Chrome、Firefox、Opera、Internet Explorerでテストされています。

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

スニペットを展開

— ルーウェン
ソース

2

ただやる：あなたにクラスを追加してくださいdiv：

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

そして、この記事で説明を読んでください。注：Heightが必要です。

— アンシュル
ソース

2

私が最近見つけたトリックがあります：あなたは使用する必要があり、top 50%次にあなたはtranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

スニペットを展開

— メルキア
ソース

すべてのブラウザーでdivを垂直方向に中央揃えにする方法は？

フレックスボックスソリューション

垂直方向のみの中央揃え

外側のコンテナ：

内部コンテナ：

コンテンツボックス：

デモ：

水平方向および垂直方向の中央揃え

内部コンテナ：

コンテンツボックス：

デモ：

CSSグリッド

CSS

HTML