138

したがって、 を使用すると、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

4

14 に答える 14

188

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

Browsershotによると、JSFiddleは正常に動作します。

于 2012-09-14T02:23:07.650 に答える
143

この質問は 2012 年に出されて以来、フレックスボックスのブラウザー サポートで長い道のりを歩んできたため、この回答は必須であると感じました。

親コンテナの表示が の場合、flexyes , (margin: auto auto別名) は、 or要素であるかmargin: autoどうかに関係なく、水平方向と垂直方向の両方で中央揃えに機能します。inlineblock

#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; /* vertical */
    justify-content: center; /* horizontal */
}
<div id="parent">
    <div>hello world</div>
</div>

于 2014-09-27T22:37:19.097 に答える
66

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

于 2013-08-07T14:44:08.270 に答える
25

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

元の答え:

HTML

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

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
于 2015-07-19T19:23:01.847 に答える
10

質問が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; 
}
于 2014-09-17T17:21:17.570 に答える
8

中央に配置する 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/

于 2012-09-13T23:19:34.090 に答える
4

これら 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 つ目-コンテンツが流動的である場合、table および table-cell css プロパティを使用して、垂直方向の配置と text-align を中央に配置することもできます。

/*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/

私は正確なコンテンツのセンタリングのためのテーブルソリューションを好みますが、特にコンテンツの配置の正確な比率を維持したくない場合は、相対的な絶対配置がより良い仕事をする場合があります.

于 2015-09-01T11:15:32.617 に答える
1

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

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 */
}

結果を見る

于 2016-08-09T12:50:11.560 に答える
1

div を垂直方向に中央揃えする簡単な方法はありません。これは、あらゆる状況でうまくいきます。

ただし、状況に応じて、それを行う方法はたくさんあります。

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

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

「css vertical centering」でググることもできます

于 2012-09-13T22:42:16.350 に答える