質問: みなさんこんにちは CSSで height:100%にしてあるボックスの中にさらに別のボックスを入れて,親要素の縦横中央に表示,さらに高さは中身に合わせて自動的になるようにしたいのですがうまくいきません。 外側のボックスをboxA,内側のボックスをboxBとすると 内側のboxBはboxAの中央に表示されるようにしたいと思っています。 ``` #boxA { height:100%; position: relative; } #boxB { height:auto; position:absolute; top:0; bottom:0; left:0; right:0 } ``` でいけるかと思ったら... boxBの方も高さ100%になってしまいます。 どのようにすれば良いでしょうか。 よろしくお願いします。
回答: 下記の記述は height / width が決まっていない場合、こうなるように拡張されるのでは。 ``` top:0; bottom:0; left:0; right:0 ``` height / width が決まっていない中央配置なら以下のようなやり方もあります。 ``` #boxB { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); } ``` 【position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH】