Webページのコンテンツをセンタリングするためのさまざまなソリューションに全く満足したことはありません。 <center>タグは18世紀半ばに廃止されましたが、合理的な代替手段は見当たりません。具体的には、私は親のDIVを中心に置くことを望んでいますが、左上のコーナーに対しては「絶対的に」設定することができます。絶対的な位置付けを中心にCSSを中心にする
すべてを再測定するwindow.onresize javascriptを使用せずにこれを達成する方法はありますか？これはかなり単純なアイデアのようだ...私は物事を絶対的に配置したい、ちょうど0,0座標がブラウザウィンドウの左上隅以外のものに相対的であることを望む。
現在、私はdivをコンテンツの中心に置いて相対的な位置付けをしていますが、それは相対的なオブジェクトが完全に欲しくないやり方でお互いに押し付けているので、とても面倒です。
これに関するすべてのご意見は大変ありがたいです。
これはあなたが探しているものですか？
<div style=" position: absolute;
display: inline-block;
top: 20%;
bottom: 20%;
right: 20%;
left: 20%;
background-color: #434154;
text-align: center;">
<div style="display: inline-block;
height: 100%;
vertical-align: middle;"></div>
<div style="position: relative;
color: #FFFFFF;
background-color: #546354;
display: inline-block;
vertical-align: middle;">
THIS IS CENTERED WITHOUT SCRIPTING :D
</div>
</div>
0,0がdivとの相対的な値になる場合、相対的な位置付けはしたくありませんか？
いいえ、私はそれで物事は正確な位置を持っているDIVたいが、あなたは「絶対」に物事を設定し起動した場合、彼らは、ブラウザの左上ではなく、親のdivに対してラインアップ。 –
「マージン：自動」CSSタグを使用するのが良い方法です。これはFFとSafariで動作します。 divに幅とマージンを指定します。親が100％幅の場合、このdivは中央揃えになります。
これをIEで使用するには、親のtext-align：center属性を使用し、実際の中央揃えのdivにテキストを左揃えにする必要があります。
AFAIKでは、絶対座標を0から他の任意のポイントに変更する方法はありません。相対的な方法があります。
左、右、上、下のCSSプロパティを使用して、相対的または絶対的な配置を持つ要素を配置します。上：10ピクセル。要素を上から10ピクセル移動します。 – roborourke
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
だけのコード例が、任意の.child要素は、任意の絶対位置要素は絶対にそれへの位置が最も近い位置の相対親の意志ラッパー
の0,0になります。要素に相対位置の親がない場合は、その文書のみを使用します。以下はクラスなしの例です（明確にするためにいくつかの色と幅のスタイルが追加されています）。
<html>
<body style="text-align: center;">
<div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
<div style="position: absolute; left: 0; top: 0;">
This will absolutely position relative to the container div.
</div>
</div>
<div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
This will absolutely position relative to the document
</div>
</body>
</html>
は完全に機能し、私が探していたものです。私はFF、Safariでmac、atm、testingを行っています。これはIEで同じように動作しますか（IE6は気にしません。最近のバージョンのみ）。 –
ちょうどIEでテストされて...魅力のように動作します。したがって、企業全体の鍵は、スタイルIDに属すると定義されているクラスを持つことです。つまり、 ＃id.classname 非常に面白いです。 –
実際には更なる説明のために更新はありません –
多分私は仕事を理解していなかったが、私はあなたのdiv親の
使用相対位置をセンタリングするため
margin: 0 auto;
を使用し、その同じ要素プロパティを与えることができると思います。
margin: 0 auto;
親が配置されているため、要素absoそれの中に忠実に
例：
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
あなたは、あなたが任意の子要素の位置決めコンテキストにそれを作るためにposition: relative;を持って接して配置事をしたいのdivを設定position: absolute;にこだわっている場合。
次のCSSを使用、その後、あなたはそれが幅を知っている必要があり、絶対位置のdivを中央に：あなたのように幅と左マージンを微調整することができ
<div id="wrapper">
<div id="child">
....
</div>
</div>
：
#wrapper {
width: 800px;
margin: 0 auto;
position: relative; /* creates a positioning context for child elements */
}
#child {
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
}
とHTMLをあなたはそれを必要とします（負の左マージンは、中央に置くdivの幅の半分でなければなりません）。#child
他の人がmargin: 0 auto;は、幅が設定された要素上に配置されます。
text-align: center;プロパティはこれまでよりもかなり優れています。
使用するのが少し複雑です。一度あなたがそれのハングアップを取得すると、あなたは前に非常に多くのトラブルを抱えていたのだろうかと思うでしょう！
ページの他の要素のプロパティと連携して使用する必要があります。これは、開発者やデザイナーがCSSや新しいHTML技術に関して持っている問題です。これは私たちのページ要素を提示する強力な方法を提供しますが、はるかに複雑で厳しいものにします。
マイクロビンソンの答えは、あなたがここにいる問題を確かに解決しており、それは素晴らしい例です。しかし...
私は、いずれかの答えは、あなたが遭遇するが、CSSの位置決めがより深いどのように機能するかを検討してみますすべてのケースに対して適切にtext-alignを使用する方法を説明しますとは思いません。
最も簡単な方法：
#element {
position: absolute; /*Absolute Position*/
top: 0;
left: 0; /*Set the 4 coordinates to zero*/
bottom: 0;
right: 0;
margin: auto; /*Margin to Auto*/
height: 150px; /*Set the Height and Width*/
width:150px;
background:green; /* Backgroung:optional*/
}
これは関係なく、それは大きさだが、右中でそれを持っていないでしょう。
希望に役立ちます！
参照フィドル：http://jsfiddle.net/kfPC6/
うん、ありがとう。私は実際に私が選択した答えを好む。 –