水平方向に中央に配置し、ウィンドウの上部または下部から一定の距離に設定したい div があるとします。幅を 75% に設定し、動的コンテンツに応じて高さを流動的にしたいと考えています。ページのコンテンツがビューポートを超えて拡張されることは決してないため、スクロールすることはありません。CSSでこれを行うにはどうすればよいですか？HTMLは基本的にここにあります：
<body>
<div id="main">
<div id="div_in_question">
Omg stuff goes here it will probably change though via jQuery.
</div>
</div>
</body>
HTML
<div class="container"></div>
CSS
.container {
height: 300px;
width: 75%;
position: absolute;
background-color: #ff0000;
margin-left: -37%;
left: 50%;
}
説明：position: absolute;あなたdivとそれを水平方向に中央に配置する本当のトリックはmargin-left、あなたの全幅の半分になるgiveであり、水平方向に中央に配置するように与えdivますleft50%
div 内のコンテンツの量に関係なく、上または下からの距離を固定していますか?
もしそうなら、次のようなことを試すことができます：
<div id='outer'>
<div id='inner'>
SOme text hereSOme text hereSOme text hereSOme text hereSOme text hereSOme
</div>
</div>
そしてcssクラス：
#outer{
height:150px;
background-color:red
}
#inner{
width:75%;
height:auto;
background-color:yellow;
max-height:100%;
overflow:hidden;
margin-left:14.5%;
margin-right:14.5%
}
次のようにページ幅を分割できます。
margin-left:14.5%;
margin-right14.5%;
width:75%;