☰

div を別の div 内の垂直中央に配置する [重複] 質問する

tag-icon • tag-icon html css
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を変更する必要があります。をサイズに関係なく中央に配置するために使用できる一般的なソリューションはありますか?margin-topmargin-left#innerDiv

を使用すると、中央にmargin: auto水平方向に揃えられることがわかりました。しかし、垂直方向の揃えはどうでしょうか?#innerDiv

ベストアンサー1

要約

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

このソリューションは IE6 と 7 では機能しません。
これらのブラウザでは、あなたのソリューションの方が安全です。
ただし、質問に CSS3 と HTML5 のタグを付けたので、最新のソリューションを使用しても構わないのではないかと思いました。

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

これは私の最初の回答です。今でも問題なく機能し、最も広く支持されている解決策です。テーブルレイアウトはレンダリングパフォーマンスに影響しますしたがって、より現代的なソリューションの 1 つを使用することをお勧めします。

ここに例があります

テスト済み:

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

html

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

CS

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

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

現代的なソリューション（変換）

変換は今ではかなり支持されているもっと簡単な方法があります。

CS

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

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

デモ

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

フレックスボックスをどんどん使い始めました今では十分にサポートされていますこれまでのところ、これが最も簡単な方法です。

CS

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

デモ

その他の例と可能性:1ページですべての方法を比較

おすすめ記事