margin：autoを使用してdivを垂直方向に揃える

113

したがって、を使用すると、divを水平方向に中央揃えできることがわかりますmargin:0 auto;。必要がありmargin:auto auto;、私はそれが動作するはずだと思うどのように動作しますか？垂直方向にも中央揃えですか？

なぜうまくいかないのvertical-align:middle;ですか？

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

スニペットを展開

JSFiddle

html css centering

— セーバー
ソース

1

Flexboxに関する下記の@zprの回答を読んで実装することを強くお勧めします。それは今日の時点で非常によくサポートされており、CSSははるかにクリーンになります。

— Govind Rai 2017

if（（new Date（））。getFullYear（）> 2017）useFlexBox = true;

— Brandito 2018

173

2020年8月の更新

以下は有用な情報を読むのに価値がありますが、Flexboxをしばらく使用しているので、この回答に従って、それを使用してください。

次のものは使用できません。

vertical-align:middleなぜなら、それはだていないブロックレベル要素に適用

margin-top:autoそしてmargin-bottom:auto、それらの使用された値はゼロとして計算されるため

margin-top:-50%ためパーセンテージベースマージン値に対して計算された幅を含むブロックの

実際、ドキュメントフローと要素の高さの計算アルゴリズムの性質上、要素を親の垂直方向の中央に配置するためのマージンを使用することは不可能です。垂直マージンの値が変更されるたびに、親要素の高さの再計算（再フロー）がトリガーされます。これにより、元の要素の中心が再トリガーされ、無限ループになります。

以下を使用できます。

このようなシナリオに役立ついくつかの回避策。3つの要素は次のようにネストする必要があります。

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

スニペットを展開

JSFiddleは Browsershotに従って正常に動作します。

— ov
ソース

10

#IE7以下でのみ解釈されるルールを前に付けるハックです。代わりに、IE固有のスタイルシートにこれらのルールを含めることを好むかもしれ条件付きコメントを使用することによってなど

— OV

2

これがそうである理由を引用して+1、幅に基づくマージンの割合の計算は非常に目を見張るものでした。

— ricosrealm 2013年

2

「無限ループ」ステートメントについては疑問です。

— Barun

105

人類はすでに数年前に月に行ってきました、そして我々はまだこの強盗に対処しなければなりません。ブラウザーで物事を垂直方向に揃える、

— イエス

3

> = IE9時代でposition: absolute; top: 50%; transform: translateY(-50%);は、実現可能で非常に人気があります...（top:50%;margin: - $halfHeight事前に高さを知る必要がない場合とは異なります）

— Frank Nocke

112

この質問は2012年に行われたものであり、フレックスボックスのブラウザーサポートについては長い道のりを歩んできたので、この回答は必須であるかのように感じました。

あなたの親コンテナの表示がある場合はflex、その後、はい、margin: auto auto（としても知られているmargin: auto）ことがあるかどうかに関係なく、水平方向と垂直方向の両方、それを中心に取り組んでいきますinlineかblock要素。

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

スニペットを展開

この例のjfiddleのように、ビューポートに相対的なサイズを使用するため、幅/高さを完全に指定する必要はないことに注意してください。

フレックスボックスのブラウザーサポートは、投稿時点では史上最高ですが、多くのブラウザーはまだサポートしていないか、ベンダープレフィックスを必要とします。最新のブラウザーサポート情報については、http：//caniuse.com/flexboxを参照してください。

更新

この回答は少し注目されたので、使用している場合は指定する必要がなくmargin、すべてdisplay: flexの要素をコンテナの中央に配置したいことも指摘しておきます。

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

スニペットを展開

— zpr
ソース

4

parent {display：flex; }子{margin：auto 0; }は単に素晴らしいです。

— Arek Kostrzeba 16

OMG男、あなたはロックスターの男です、いまいましいあなたは二度以上あなたに賛成することはできません!!!

— PirateApp 2017

内容一致の問題と混同される可能性がある場合、これは良い答えです。コンテナーにflexを設定することで、コンテンツdivにプロパティを設定する必要がなくなります。

— エリック

1

これは、2018年に機能する最も優れたエレガントなソリューションです。ありがとうございます。

— SilverSurfer 2018

IE 11の真ん中に私は、それを追加したい2018年5月の時点で、この溶液を用いて、テキストを縦に整列しない

— Yefu

62

これが私が見つけた最良の解決策です：http : //jsfiddle.net/yWnZ2/446/ Chrome、Firefox、Safari、IE8-11およびEdgeで動作します。

あなたが宣言した場合はheight（height: 1em、height: 50%など）や、それはブラウザが高さを知っている要素だ（img、svg、またはcanvasたとえば）、あなたは垂直センタリングのために必要なすべての本です。

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

通常はコンテンツを指定する必要があります。widthそのmax-widthため、コンテンツは画面/コンテナ全体を拡大しません。

これを常に他のコンテンツと重なるビューポートの中央に置きたいモーダルに使用する場合position: fixed;は、ではなく両方の要素に使用しposition: absoluteます。http://jsfiddle.net/yWnZ2/445/

これがより完全な記述です：http ://codepen.io/shshaw/pen/gEiDt

— shshaw
ソース

3

これは、必ずしも親要素の中央に配置するわけではありません。ページの中央に配置したいだけの場合は、素晴らしいハックです。

— Joel Mellon

2

position: relative親に追加するだけで、要素は親の中央に配置されます。あなたがもっと読みたい場合、私は技術についてスマッシングマガジン上はるかに大きいWRITEUPをした：coding.smashingmagazine.com/2013/08/09/...

— shshaw

絶対的なものは、親または2つ以上の親（ボディに対して）に基づいている場合があり、親戚は、祖父母または偉大な祖父母（親に対して）の場合があります。多分それがいつ、なぜ起こるかを知っている人はこのテクニックをよりよく制御できます-私はそれらの問題を実際に調べたことがありませんが、絶対から相対への切り替え自体がこの仕事をするための解決策ではないことを知っています。私はあなたの記事を少し読みました、そしてそれは絶対的で相対的な最初の絶対的または相対的な祖先に上がるように見えます、それは正しいですか？

— Joel Mellon

私は、少し遅いです。上記のコメントを読み直しました。あなたがそれを追加するように言ったのに気づかなかったparent- わかった。本当にありがとう！

— Joel Mellon

1

@commonpike IE8 / 9の唯一の問題はdisplay: table、可変高さのコンテンツに使用する場合です。それ以外の場合、このメソッドは期待どおりに機能するはずです。お読みWRITEUP全体の詳細について。IE8 / 9で完全なビューをテストして、問題がないかどうかを確認することもできます。

— shshaw 2016年

22

編集：2020年です。代わりにフレックスボックスを使用します。

元の答え：

HTML

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

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— ギャルマーガリット
ソース

IE 8以前のバージョンのieでは機能しません。変換プロパティはバージョン9.0以降でサポートされているため（接頭辞-ms-付き）。（つまり、10はプレフィックスを必要としません）。

— DevWL

5

確かに、私はIE8を気にしません

— Gal Margalit

そして作家は☺彼の質問のためのHTML5のタグ付け

— ギャルMargalit

9

質問が2012年からであることは知っていますが、これまでで最も簡単な方法を見つけたので、共有したいと思いました。

HTML：

<div id="parent">
     <div id="child">Content here</div>
</div>

およびCSS：

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

— ポーラ・フレック
ソース

7

中央に配置するdivの高さがわかっている場合は、その親の中に絶対的に配置してtopから、値をに設定できます50%。これは、子divの上部をその親の50％のところに配置します。つまり、低すぎます。margin-top高さの半分に設定して、引き上げます。これで、子divの垂直方向の中点が親の垂直方向の中点に配置されました-垂直方向に中央に配置されます！

例：

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

スニペットを展開

http://jsfiddle.net/yWnZ2/2/

— 凝灰岩
ソース

1

margin-top要素の高さを基準に％で設定することはできないため、最終的には寸法に依存する修正が行われます

— ov

1

どちらが...私が私の答えで正確に言ったことですか？「中央に配置するdivの高さがわかっている場合」。また、OPで％を使用する必要があるとは言いませんでしたmargin-top。

— 凝灰岩

事前定義された要素の高さに固定されるため、私はこのソリューションに同意しません。あなたは答えにそれを反映したいかもしれません

— ov

3

さて、あなたが見落とした部分を太字にしました。

— 凝灰岩

1

@ov：要素の高さが固定されていない場合、JSを使用して計算された高さを取得し、それに応じて負の上マージンを設定できます。私の意見では、これは依然として垂直方向の中央揃えに最適な方法です。

— daGUY 2012

3

これら2つのソリューションでは、2つのネストされた要素のみが必要です。
最初 - コンテンツが静的な場合の相対位置と絶対位置（手動中央）。

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

または流動的な設計の場合 -正確なコンテンツセンターの場合は、代わりに以下の例を使用してください。

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

コンテンツがウィンドウの高さの50％を超える場合は、「最小高さ」を設定する必要があります。モバイルデバイスやタブレットデバイスのメディアクエリを使用して、この高さを操作することもできます。ただし、レスポンシブデザインを使用する場合のみ。

何らかの理由で必要な場合は、さらに進んで、単純なJavaScript / JQueryスクリプトを使用して最小高さまたは固定高さを操作できます。

2番目 - コンテンツが流動的である場合、 uはまた、垂直方向の配置と中央揃えのテキスト配置で、テーブルとテーブルセルのcssプロパティを使用できます。

/*in a wrapper*/  
display:table;

そして

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

オブジェクトの幅を操作するグリッドレイアウトとメディアクエリを備えたレスポンシブWebデザインソリューションとしてよく使用される、完全に機能し、スケーリングします。

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

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

https://jsfiddle.net/GlupiJas/4daf2v36/

正確なコンテンツの中央揃えにはテーブルソリューションを使用しますが、特にコンテンツの配置の正確な比率を維持したくない場合は、相対的な絶対配置が適切な場合があります。

— DevWL
ソース

2

.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

スニペットを展開

— Seetpal singh
ソース

このソリューションの概要を教えてください。さらに、下部にある「ポップアップメッセージ」が中央に表示されない

— Alex

私は何かを逃しましたが、今はdivを真ん中に垂直に保つように洗練されています。今すぐ確認できます

— Seetpal sing

0

divを垂直方向に中央揃えする簡単な方法はありません。

ただし、状況に応じてさまざまな方法があります。

それらのいくつかを次に示します。

親要素の上下のパディングを設定します。例：padding：20px 0px 20px 0px
テーブルを使用し、テーブルセルはコンテンツを垂直方向に中央揃えにします
親要素の相対位置と垂直方向に中央に配置するdivの位置を絶対位置に設定し、top：50pxとしてスタイル設定します。下：50ピクセル; 例えば

「css垂直センタリング」をグーグルすることもできます

— はす
ソース

0

可変高さ、マージン上部および下部自動

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

スニペットを展開

可変高さ、マージン上部および下部自動

— user3668456
ソース

0

フレックスボックスの使用：

HTML：

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS：

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

結果を表示

— ダニエルブラスケス
ソース

0

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>

— スディプトチャクラボルティ
ソース