可変サイズのdivを垂直方向と水平方向にセンタリングする

幅と高さがブラウザウィンドウの一定のパーセンテージ、たとえば70％と80％であり、ある特定のmin-widthとmin-heightを持つdivがあります。私は、このdivをブラウザウィンドウ内で垂直方向にも水平方向にも表示させたいと思っています。ブラウザのウィンドウのサイズが変更されると、divのサイズを自動的に変更して中央に保持したい。可変サイズのdivを垂直方向と水平方向にセンタリングする

まず、固定幅または高さのdivではないので、負のマージンを使用してabsoluteポジショニングを使用することはできません。私は通常、position: staticを使用し、左右のマージンをautoに設定して、水平方向のセンタリングを行っています。これにより、ブラウザウィンドウのサイズ変更を水平方向にのみにして、自動サイズ変更とセンタリングが保証されます。このようなことは、垂直方向のセンタリングでは機能しません。そして、ポジションがabsoluteではないので、私はそれに負のマージンを使用できません（私はそれが水平のためにstaticである必要があります）。

display:table-cellを使用して可変サイズのdivの解決策がある可能性があるので、StackOverflowにはhereとhereがあります。任意の設定がposition,marginなどのものを使用して、他の解決方法がありますか？

Here's the demo siteこのレイアウトを適用したい場所です。

ありがとうございます！

出典

2011-11-29 Abhranil Das

私が正しく理解していれば、それはあなたがSafariで望むように機能します。 – jQuerybeast

これは水平に配置されていますが、Safariウィンドウのサイズを垂直に変更すると、divが中央に留まるように移動していないことがわかります。 –

あなたはこれを見てみるといいかもしれません：http://jsfiddle.net/C958g/しかし私はそれを提案しません。ポジションアブソリュートを指定しない特別な理由はありますか？あなたは正確に同じものを達成することができます。あなたのCSSのいくつかを変更することで、より多くのことを達成することができます。 – jQuerybeast

また、のような本当に簡単な何かを試みることができる：もちろん

<head> 
<style type="text/css"> 
body, html { 
    height:100%; 
    margin:0; 
} 
#div1 { 
    height:10%; 
} 
#div2 { 
    background:#F00; 
    height:80%; 
    margin:0px auto; 
    width:80%; 
} 
#div3 { 
    height:10%; 
} 
</style> 
</head> 

<body> 
    <div id="div1"> 
    </div> 
    <div id="div2"> 
    </div> 
    <div id="div3"> 
    </div> 
</body> 
</html>

をこの技術は、それがそれほど非常にセクシーになりれ、余分なdiv要素に必要 - しかし、私はそれはかなりクロスですかなり確信していますブラウザセーフ...

出典

2011-11-29 12:39:27 ptriek

ねえ、私はついにテーブルセルを使わなければなりませんでしたが、私はあなたのアイデアの一部も組み込んだときにしか機能しませんでした。ありがとう！ –

可変サイズのdivを垂直方向と水平方向にセンタリングする

答えて

関連する問題