CSSで左右の中央配置

質問

CSSでのレイアウトを考えております。

┌──────────────┐
│MainBox(W760px)　　　　　　　　　　 │
│┌─────┐┌─────┐│
││boxA　　　　 ││boxB　　 　　││
││(W300px)　　││(W300px)　　││
│└─────┘└─────┘│
│　　　　　　　　　　　　　　　　　　　　　 │
└──────────────┘
↑このようなかんじなのですが、
boxAとboxBの配置はabsoluteを使って成功したのですが、MainBoxごとプラウザの横幅を変えても左右の中央配置にしたいのですが、どのようにしたらよろしいのでしょうか？
同じような質問を参考にしてみたのですが、うまくいきませんでした。すいませんが、どなたか助けてください。

回答No.1

steel_gray · ベストアンサー

何が成功していて、何がうまくできないのかよくわからないんだけど
とりあえず？？

MainBox{
width:760px;
margin-left:auto;margin-right:auto;/*左右中央に配置*/
position:relative;/*boxA,boxBをabsoluteで配置するため*/
}
boxA{
width:300px;
position:absolute;
top:?;left:?/*MainBoxの上左端からの位置*/
}
boxB{
width:300px;
position:absolute;
top:?;left:?/*MainBoxの上左端からの位置*/
}

お礼

そうです！まさにこれです。
実行してみたところ、うまくいきました。
もう、なんてお礼を言ってよいやら・・・

助かりました。本当にありがとうごさいました。

回答No.3

MAN_MA_RUI

> MainBoxごとプラウザ
プラウザじゃなくてブラウザ。PじゃなくてB。

とりあえずてきとうにこんな感じでいかがでしょうか？
（固定幅じゃなく可変幅にしてみました。調整は適宜お願いします。）
.aa {
border:2px solid red;
width:45%;
height:100px;
float:left;
margin:2%;
}
.bb {
width:80%;
margin-left:auto;
margin-right:auto;
}
.cc {
border:3px solid blue;
text-align:center;
}
.dd {
clear:both;
}

<div class="cc">
<div class="bb">
<div class="aa"></div>
<div class="aa"></div>
<div class="dd"></div>
</div>
</div>

お礼

あれれ・・・Ｂを押したつもりだったのですが・・・

詳細な回答ありがとうございました。勉強になりました。

回答No.2

kyanasaki

私もこの方法が分からず<div align="center">を使っていました…。

CSS書籍に載っていた方法は

#main {
width:xxxxpx;
margin-left:auto;
margin-right:auto;
}

この方法で中央に表示できます。
試しあれ

お礼

div align="center"だけだとうまくいかないんです。やりかたがおかしいのでしょうか。しかし、解決いたしました。
ご回答ありがとうございました。