※ ChatGPTを利用し、要約された質問です（原文：スタイルシートでボックスを中央に表示する方法）
スタイルシートでボックスを中央に表示する方法
このQ&Aのポイント
スタイルシートを使用してボックスを中央に配置する方法について解説します。
大ボックスを中央に配置し、その中に上から10、左から20の位置に小ボックスを配置する方法を知りたいです。
tableタグを使わずにCSSのみで要件を実現する方法をお教えください。
大ボックスを中央に配置して
その中に、小ボックスを上から10、左から20の位置に配置させたいのですが、
大ボックスが中央に配置できません。
少し右側にズレてしまいます。
（ソースは文章最後にあります）
そこで大ボックスの position: absolute; を削除すると
中央に配置できるものの、小ボックスが外に飛び出して
ブラウザを基点とした上から10、左から20の位置に配置されてしまいます。
tableタグを使わずにCSSのみで
大ボックスを中央に。
その大ボックスの中に大ボックスの左上を基点として上から10、左から20の位置に
小ボックスを配置する方法はないのでしょうか・・・。
よろしくお願い致します。
<html>
<head>
<title>box</title>
<style type="text/css">
<!--
.boxL { /* 大ボックス */
width: 400px;
height: 100px;
background-color: green;
position: absolute;
}
.box1 { /* 小ボックス */
width: 75px;
height: 30px;
background-color: lightblue;
position: absolute;
top: 10px;
left: 20px;
}
-->
</style>
</head>
<body>
<div align="center">
<div class="boxL">
<div class="box1">小ボックス</div>
</div>
</div>
</body>
</html>
お礼
ありがとうございます！ positionは absolute と static しか頭に入ってませんでした・・・ ちゃんと表示することができました。 おかげさまで無事解決しましたので、 回答を締め切らせていただきます。 本当にありがとうございました！