コンテナの可視部分の中央揃え

コンテナの可視部分の中央に要素を配置する必要があります。 コンテナの一部がスクロール領域の背後に隠れている場合、要素は可視領域の中央に配置する必要があります。 コンテナがまったく表示されない場合、要素はコンテナとともに表示されません。 コンテナが画面全体を占める場合、要素は画面の中央にある必要があります。



おおよそ右の図のように。



要素とそのコンテナのサイズについては何もわかっていません。



ここに私がそれをした方法の例のページがあります。 ページには3つの大きなdivがあり、平均して、目に見える中央に整列する要素が配置されます。 IE 6および7でチェックイン（私の気まぐれではなく、タスクはこれです）。



シンプルで信頼性の高い方法を知ることは興味深いです。 そして現在、Opera 9.5では、機能しません。 もっとコードの普遍性が欲しい。



相対配置では、要素がコンテナの中央に配置されます。 さらに、コンテナの中央が表示制限を超えた場合、要素は表示されません（図のように）。 固定および静的な位置決め方法はまったく適していません。



絶対モードを使用しました。 そして、CSS式の形式で左と上のプロパティを登録しました：

.divVisibleCenter

{

位置：絶対;

top：式（GetVisibleCenterY（this））;

左：式（GetVisibleCenterX（this））;

}

要素のxおよびy座標の計算は、それぞれ別個のJavaScript関数GetVisibleCenterXおよびGetVisibleCenterYで実行されます。

関数GetVisibleCenterX（アイテム）

{

var c = item.parentNode;

var s = c.getBoundingClientRect（）;

var right = c.document.documentElement.offsetWidth-（（s.right <c.document.documentElement.offsetWidth）？c.document.documentElement.offsetWidth-s.right：0）;

var left = c.offsetLeft +（（c.offsetLeft + s.left> c.offsetLeft + right）？0：-s.left）;

var offs =（（c.offsetLeft> left）？（c.offsetLeft-left）：0）;

var width = right-offs;



左を返す+ offs +（幅/ 2）-item.clientWidth / 2;

}

関数GetVisibleCenterY（アイテム）

{

var c = item.parentNode;

var s = c.getBoundingClientRect（）;

var bottom = c.document.documentElement.offsetHeight-（（s.bottom <c.document.documentElement.offsetHeight）？c.document.documentElement.offsetHeight-s.bottom：0）;

var top = c.offsetTop +（（c.offsetTop + s.top> c.offsetTop + bottom）？0：-s.top）;

var offs =（（c.offsetTop> top）？（c.offsetTop-top）：0）;

var height = bottom-offs;

return top + offs +（height / 2）-item.clientHeight / 2;

}