web-dev-qa-db-ja.com

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

margin:0 auto;を使用すれば、divを水平方向に中央揃えできることを知っています。 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

htmlcsscentering
93
savinger

使用できません：

vertical-align:middleそれはnotブロックレベル要素に適用可能

使用される値はzero として計算されるため、margin-top:autoおよびmargin-bottom:auto

margin-top:-50%理由は、 パーセントベースのマージン値は、包含ブロックのwidthに対して相対的に計算されるためです）

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

次を使用できます：

このようないくつかの回避策 シナリオに適しています。 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に従って正常に動作します。

148
o.v.

この質問は2012年に行われたものであり、フレックスボックスのブラウザサポートが大きく進歩したため、この答えは必須であると感じました。

親コンテナの表示がflexの場合、yes、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>

このexample jfiddleのように、幅/高さを絶対に指定する必要がないことに注意してください。ビューポート。

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

更新

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

#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>
79
zpr

私が見つけた最良の解決策は次のとおりです。 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

57
shshaw

このページのソリューションはどちらも機能しません（私にとって）。

私の解決策

Html

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

CSS

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

質問は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; 
}
9
Paula Fleck

センタリングする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/

7
tuff

これらの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スクリプトを使用して最小高さまたは固定高さを操作できると思います。

Second-コンテンツが流動的である場合uはtableおよびtable-セルの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/

正確なコンテンツのセンタリングにはテーブルソリューションの方が好きですが、場合によっては、特にコンテンツの配置の正確な割合を維持したくない場合は、相対的な絶対配置の方が適切です。

3
DevWL
.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>
1
Seetpal singh

Divを垂直方向に中央揃えする簡単な方法はありません。あらゆる方法でトリックを実行できます。

ただし、状況に応じて多くの方法があります。

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

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

また、「css垂直方向の中央揃え」を検索することもできます

0
hasu

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

.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>

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

0
user3668456

Flexboxの使用：

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
Daniel G. Blázquez