web-dev-qa-db-ja.com

Divを別のdivの内側に垂直方向に中央揃え

私は別のdivの内側に追加されたdivを中央に置きたいです。

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

これは私が現在使用しているCSSです。

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

お分かりのように、私が今使っているアプローチはinnerDivのwidthとheightの値に依存します。width/heightが変わったら、margin-topとmargin-leftの値を変更する必要があります。 innerDivは常にそのサイズに関係なく？

私はmargin:autoを使うことでinnerDivをmiddleに水平にアラインできることを考え出しました。

htmlcsshtml5css3
496
user700284

tl; dr

垂直方向の中央揃えは機能しますが、親要素にtable-cellを、子要素にinline-blockを使用する必要があります。

この解決策は、IE 6および7では機能しません。
あなたのものはそれらのために行くより安全な方法です。
しかし、あなたがあなたの質問にCSS3とHTML5でタグ付けしたので、私はあなたがモダンな解決策を使っても構わないと思っていました。

古典的な解決策（テーブルレイアウト）

これが私の最初の答えでした。それでもまだうまくいき、最も幅広いサポートを提供するソリューションです。テーブルレイアウトは あなたのレンダリングパフォーマンスに影響を与えるでしょう だから私はあなたがもっと現代的な解決策の一つを使うことを提案するでしょう。

これは例です

でテスト済み：

  • FF3.5 +
  • FF4 +
  • サファリ5+
  • Chrome 11以降
  • IE9 +

_ html _ 

<div class="cn"><div class="inner">your content</div></div>

_ css _ 

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

現代の解（変換）

変換は 現在かなりサポートされている それをするもっと簡単な方法があります。

_ css _ 

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

デモ

♥私のお気に入りのモダンなソリューション（flexbox）

私はflexboxをますます使用するようになりました それは今またよくサポートされています それははるかに簡単な方法です。

_ css _ 

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

デモ

より多くの例と可能性： 1ページのすべての方法を比較

695
meo

この水平方向と垂直方向のセンタリングを実現するもう1つの方法は、次のとおりです。

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

（ 参照 ）

111
user700284

別の方法は変換変換を使うことです

外部部門は、そのpositionをrelativeまたはfixedに設定し、内部部門は、そのpositionをabsolute、topおよびleftに50%に設定し、transform: translate(-50%, -50%)を適用する必要があります。

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

テスト済み：

  • Opera 24.0 （最小12.1）
  • Safari 5.1.7 （-webkit-接頭辞を付けた最小4）
  • Firefox 31.0 （最低でも-moz-プレフィックス付きの3.6、プレフィックスなしの16から）
  • Chrome 36 （-webkit-プレフィックスを使用した最小11、プレフィックスを使用しない36から）
  • IE 11、10 （プレフィックスなしの10から、-ms-プレフィックス付きの最小9）
  • もっとブラウザを使ってもいいですか？
45
rnrneverdies

たった3行のCSSで縦に並べる

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

最も簡単

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

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

shouldiprefix によると、これがあなたが必要とする唯一の接頭辞です。

要素の親が高さ、または縦方向のサイズを拡張するコンテンツを持つ限り、.parent-of-elementの 'height'プロパティの値として％を使用することもできます。

40
drjorgepolanco

書くのが困難で保守が難しいCSSと結びついているのではなく（慎重なクロスブラウザ検証も必要です！）CSSをあきらめて代わりに驚くほど単純なHTML 1.0を使用する方がはるかに良いことがわかります。

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

これは、元のポスターが望んでいたすべてのことを達成し、堅牢で維持可能です。

16
Iron Pillow

私は個人的には、外側のコンテナの全高にまたがるように隠し擬似要素を使用し、それを他のコンテンツと垂直に整列させるというトリックを好みます。 Chris Coyierには、この技法に関するNiceの記事があります。 http://css-tricks.com/centering-in-the-unknown/ /この大きな利点はスケーラビリティです。あなたは、コンテンツの高さを知っているか、それが拡大/縮小することを心配する必要はありません。この解決策はスケールします:)。

これはあなたが必要とするすべてのCSSと実用的な例をいじることです。 http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}
5
Harry Robbins
#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

上記のCSSスタイルを追加するだけで可能です。ではごきげんよう。クエリー書き込みのためのコメント

4
Nishant Singh

heightが設定されていない場合（自動）あなたはそれを垂直方向の中央にするために内側のdivにいくつかのパディング（上と下）を与えることができます：

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>
3
Majid

別のdiv内の垂直方向の中央揃えdiv項目

コンテナーをdisplay:tableに、次に内部項目をdisplay:table-cellに設定するだけです。コンテナーにheightを設定してから、内部項目にvertical-align:middleを設定します。これは、IE9の頃までの幅広い互換性があります。

垂直方向の配置は親コンテナの高さに依存することに注意してください。

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>
3
Volomike

ここに画像の説明を入力してください 100％うまくいく 

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/ /

2
Mangesh Jadhav

フィドルリンク< http://jsfiddle.net/dGHFV/2515/ >

試してみる 

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }
2
Friend

これは私のために働きます。外側のdivの幅と高さを定義できます。

ここでのコード： 

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>
2
phlegx

私は1年以上前から次の解決策を使ってきました、それはIE 7と8でも同様に動作します。 

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
2
Arsh

上記の素晴らしい答えを読んでもまだ理解できない場合。

これを実現する方法の2つの簡単な例を示します。

表示を使用する：table-cell

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

フレックスボックスを使う（display：flex）

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

注：上記の実装を使用する前に、display：table-cellとflexのブラウザの互換性を確認してください。

2
shivamsupr

私はCSS3 calc()を使ってこの問題を解決することができる別のクロスブラウザの方法を示したいと思います。
親divに対して絶対位置にある場合、calc()関数を使用して、子divのmargin-topプロパティを制御できます。


calc()を使用する主な利点は、親要素の高さはいつでも変更でき、子divは常に中央に揃えられることです。
margin-topの計算は動的に行われます（スクリプトではなくcssによって行われ、非常に大きい 利点 ）。

これをチェックしてください LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will allways            center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

出力：

enter image description here

1
jonathana

このように内部要素を整列させてみてください。

top: 0;
bottom: 0;
margin: auto;
display: table;

そしてもちろん：

position: absolute;
1
VonAxt

Flexを使ってCSSのdivを垂直方向と水平方向に中央揃えできます。

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

そして2番目のものは以下の通りです。

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

そして結果のHTML：

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>
1
Tariq Javed

これは単純なjavascript（jQuery）ブロックを使って実行できます。

_ css _ ：

#outerDiv{
    height:100%;
}

Javascript ：

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>
1
Ghanesh MV

これはIE6に戻ってきます！

<!DOCTYPE html>はIE6でも必要です！ [IE 6のデフォルトの厳密モードも強制する]。

（もちろん、ボックスの色付けはデモ目的のみです）

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}
<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>
1
Bekim Bacaj

高さの値を指定していないinnerdivの場合は、垂直方向に中央揃えする純粋なCSSソリューションはありません。JavaScriptソリューションでは、innerdivのoffsetHeightを取得してから、style.marginTopを計算することができます。

1
james li

親エレメントのテキストの中央寄せ、子エレメントのインラインブロックの表示これにより、ほとんどすべてのものが中心になります。私はそれが「ブロックフロート」と呼ぶと信じています。

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

これはフロートの幸運に代わる良い方法です。

0
user3943543

Divを別のdivの内側に垂直方向に中央揃え

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>
0
antelove

垂直方向と水平方向の両方に中央揃えをするには：

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}
0
Bhimashankar Sutar