[解決済み] 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-top と margin-left の値を指定します。を中央に配置するために使用できる一般的な解決策はありますか？ #innerDiv そのサイズに関係なく？

を使うことがわかった。 margin: auto は水平に整列させることができます。 #innerDiv を中央に配置します。しかし、垂直方向の整列はどうでしょうか？

どのように解決するのですか？

tl;dr

垂直方向の中央揃えは有効ですが、そのためには table-cell を親要素に、そして inline-block を子局で使用します。

この解決策は、IE6 & 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;
}

デモ

私のお気に入りのモダンなソリューション（フレックスボックス）です。

フレックスボックスをどんどん使うようになった また、サポートが充実しています。 最も簡単な方法です。

CSS

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

デモ

その他の例＆amp;可能性。 1つのページですべてのメソッドを比較する