HTML要素をビューポート内で縦と横の中央に配置する最適な方法は何ですか？

Question

ポップアップメッセージとして使用するために、ビューポートの中央に要素を配置したいとしましょう。これは、次を満たす必要があります。

• 要素は、ブラウザのサイズが変更された場合、要素のサイズの変更は動的に
• 要素を中心に滞在する必要があり
• ないのJavascriptが許可されている場合でも、ブラウザ内（水平方向と垂直方向の両方）を中心とままにしてください
• はまだ

下記の表ベースのソリューションに頼ることなく、これを達成するためのよりよい方法はありIE7で動作しますか？

<table style="position:absolute;width:100%;height:100%"> 
    <tr> 
     <td align="center"> 
      <span id="centeredContent">I always remain centered</span> 
     </td> 
    </tr> 
</table> 

Answer 1

（私の意見では）最善の解決策は、50の要素の左上に配置するために絶対位置を使用することです％/ 50％にしてから、要素を負のマージンを使って中央に押し戻します。唯一の欠点は、要素の幅と高さを指定する必要があることです。ここでは例です：あなたが本当に持っている中心のコンテンツが必要な場合http://jsfiddle.net/UGm2V/

---

：

HTML：

​<div id="centerme"> 
    Hello, world! 
</div>​ 

CSS：

​#centerme 
{ 
    position: absolute; 
    left: 50%; 
    top: 50%; 

    /* You must set a size manually */ 
    width: 100px; 
    height: 50px; 

    /* Set negative margins equal to half the size */ 
    margin-left​: -50px; 
    margin-top: -25px; 

    background-color: cornflowerblue; 
} 

はここjsfiddleのデモです動的な高さ、より高度なソリューションがあります。古いIEブラウザではうまく動作しません。 HTMLは次のようになります。

<div id="outter-container"> 
    <div id="inner-container"> 
     <div id="centred"> 
      <p>I have a dynamic height!</p> 
      <p>Sup!</p> 
     </div>   
    </div> 
</div> 

アウトターコンテナは、ページの幅と高さをカバーする必要があります。これは、絶対配置のブロック要素です。
内部の容器は実際にはテーブルです！それはdisplay: table cssプロパティによって決まります。ここでの勝利は、あなたが実際にテーブルHTMLを必要としないということです。
#centred divは最後に必要な要素です。それでもページの幅と高さの100％をカバーしますが、内側に配置されているものはすべて縦と横の中央に配置されます。これは説明して、必要なCSSです：

/* 
An outter container is needed because the table 
won't cover the page width and height on it's own 
*/ 
#outter-container 
{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
} 

/* 
The inner container is a table which is set to 
cover the width and height of the page. 
*/ 
#inner-container 
{ 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

/* 
This table cell will cover 100% of the page width 
and height, but everything placed inside it will 
be placed in the absolute centre. 
*/ 
#centred 
{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

そしてもちろん、ここではそれに行くためにjsfiddleデモンストレーションです：http://jsfiddle.net/N7ZAr/3/

Answer 2

http://milov.nl/code/css/verticalcenter.html 右/左センタリングのためのソースコード

Answer 3

を確認するには、要素の幅を指定し、「自動」に左右のマージンを設定することができます。

垂直センタリングでは、少し厄介です。パーセンテージの高さを使用できますが、ボディの高さを100％に設定することを忘れないでください。そうしないと動作しません。

これがIE7で動作するかどうかわかりません。申し訳ありません。

Answer 4

それは固定サイズの要素であるならば、あなたはこのような何か行うことができます。

#centered { 
    position:absolute; 
    width:200px; 
    height:400px; 
    top:50%; 
    left:50%; 
    margin-left:-100px; // negative-half of element's width 
    margin-top:-200px; // negative-half of element's height 
}​ 

ここにトリックはtop:50%; left:50%;です。 margin-leftとあなたのwidthとheightの負の半に等しいmargin-topとそれを組み合わせると、あなたの要素は、ページの中央に配置されます。

Eric MeyerのCSSリセットやnormalize.cssなどのリセットスタイルシートを使用しない場合は、bodyをmargin:0;に設定してこのトリックを有効にすることが重要です。ここで

はjsfiddleです：私は、サイトのhttp://jsfiddle.net/remibreton/fZywe/1/

ライブ例：http://althotels.ca/

Answer 5

あなたが中心のコンテンツのサイズがわからない場合は、ここ 例を中心に2ステップが必要になります。http://jsfiddle.net/G6fUE/

<div class="popup-center"> 
    <div class="content"> 
     sadalshd<br /> 
     sadalshd<br /> 
     <img src="http://www.lorempixel.com/200/200" /> 
     sadalshd<br> 
    </div> 
</div>​ 

---

.popup-center { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 
.popup-center div { 
    margin-left: -50%; 
    margin-top: -50%; 
}