☰

中心に置く最良の方法 ページに縦と横に？[重複] 質問する

tag-icon • tag-icon html css alignment vertical-alignment centering
中心に置く最良の方法 ページに縦と横に？[重複] 質問する

<div>ページ上の要素を垂直方向と水平方向の両方で中央に配置する最適な方法は何ですか?

水平方向に中央揃えになることはわかっていますmargin-left: auto; margin-right: auto;が、垂直方向にも行うにはどのような方法が最適ですか?

ベストアンサー1

最も優れた柔軟な方法

このデモの主なトリックは、要素の通常のフローが上から下に進むため、 がmargin-top: autoゼロに設定されていることです。ただし、絶対位置に配置された要素は、空きスペースの配分に対して同じように動作し、同様に指定されたtopおよびで垂直方向に中央揃えにすることができますbottom(IE7 では機能しません)。

##このトリックは、 のどのサイズでも機能しますdiv。

div {
    width: 100px;
    height: 100px;
    background-color: red;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}
<div></div>

おすすめ記事