css - 幅が不明な HTML 要素を画面の中央に配置する

Question

幅と高さが不明な HTML 要素がある場合、画面の中央に配置するにはどうすればよいですか?

純粋な CSS でできない場合は、javascript で問題ありません。

Answer 1

あなたはjqueryを通してそれを行うことができます..

$(function () {
    var element=$("#elementid")
    element.css("position","absolute");
    element.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    element.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 

});

Answer 2

この答えは、不明な幅/​​高さがどのように決定されているかによって、状況に合う場合と合わない場合があります。正確な寸法がわからないが、パーセンテージで設定されている場合は、次の手法を使用できます。

#content {
    background-color: khaki; /* demo purposes */  
    position: absolute;   
    height: 20%;
    top: 50%;
    margin-top: -10%; /* half the height */   
    width: 30%;
    left: 50%;
    margin-left: -15%; /* half the width */
}

例については、このフィドルを参照してください。要約する：

• 短所: % で指定されているため、正確な寸法が不明な場合にのみ適用されます。
• 長所: 純粋な CSS ソリューション。