記事ディレクトリ
1. 提起された質問
絶対配置では 、margin: auto;スタイルを設定してボックス モデルを水平方向の中央に配置することはできません。
相対的に配置されたボックス モデルは、標準的なフローの制限から解放されず、スタイルを設定することでボックスを水平方向に中央に配置することができます。margin: auto;
例:絶対配置要素は、多くの場所で中央に配置する必要があります。下の図に示すように、右側の固定配置ボタンをブラウザーで中央に配置する必要があり、カルーセル内の 5 つの小さなドットのコンテナーを中央に配置する必要があります。 ;
2. 絶対位置決め中心設定
1. 固定サイズを設定する
絶対配置された要素を 水平方向/垂直方向に中央揃えする最も簡単な方法は、定規を使用して親コンテナーの幅と高さを測定し、4 つの辺のオフセットを設定して要素の水平方向/垂直方向の中央揃えを設定することです。
2. 最初に 50% オフセットしてから固定値に戻します
親コンテナ ボックスのサイズが変更された場合、上記の固定エッジ オフセット方法を使用して設定されたセンタリングに問題が発生します。
最初に幅/高さのオフセットを 50% に設定し、次にボックスの幅/高さの半分のオフセットをロールバックします。
例として、横方向のセンタリングを取り上げます。サイズが 200 x 200 のボックスを
- まず、 左オフセットを 50% に設定して、子要素の左側が親コンテナーの水平方向の中央に移動するようにします。
left: 50%;
- 次に、 負の左マージンを設定して、子要素をその幅の半分だけ左に移動します。子要素の幅を事前に測定する必要があります。
margin-left: -100px;
3.絶対配置された要素は水平/垂直に中央揃えされます
サイズが 80x80 ピクセルの要素の水平/垂直センタリングを設定します。
- 水平センタリングの設定:最初に子要素の左側を水平中央位置に移動するように設定し
left: 50%;、次に 40 ピクセルmargin-left: -40px左に。
/* 绝对定位元素 - 水平居中 */
.top {
/* 子元素设置绝对定位 父元素需要设置相对定位 */
position: absolute;
/* 该盒子在父容器左上角 */
/* 上边偏移 0 紧贴顶部 */
top: 0;
/* 左边偏移 50% 左侧紧贴水平居中位置 */
left: 50%;
/* 再向做移动 40 像素, 水平居中 */
margin-left: -40px;
/* 内容尺寸 */
width: 80px;
height: 80px;
background-color: blue;
}
- 垂直方向のセンタリングを設定します。最初に、子要素の上部を親コンテナの垂直方向の中央に移動するように設定して
top: 50%;から、上に 40 ピクセル移動します。
/* 绝对定位元素 - 垂直居中 */
.bottom {
/* 子元素设置绝对定位 父元素需要设置相对定位 */
position: absolute;
/* 该盒子在父容器右下角 */
/* 顶部移动到垂直中心位置 */
top: 50%;
/* 右边偏移 0 紧贴右侧 */
right: 0;
/* 垂直方向上 , 再向上走 40 像素 使得垂直居中 */
margin-top: -40px;
/* 内容尺寸 */
width: 80px;
height: 80px;
background-color: red;
}
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位示例</title>
<style>
/* 最外层 父容器盒子 */
.box {
/* 子元素设置绝对定位 父元素需要设置相对定位 */
position: relative;
/* 内容尺寸 通过测量图片获得 */
width: 300px;
height: 200px;
/* 边框 1 像素实线 */
border: 1px solid #ccc;
/* 上下设置 100 像素外边距 水平居中 */
margin: 100px auto;
/* 子元素与 */
padding: 10px;
background-color: pink;
}
/* 标准流元素 */
.center {
width: 300px;
height: 200px;
background-color: purple;
}
/* 绝对定位元素 - 水平居中 */
.top {
/* 子元素设置绝对定位 父元素需要设置相对定位 */
position: absolute;
/* 该盒子在父容器左上角 */
/* 上边偏移 0 紧贴顶部 */
top: 0;
/* 左边偏移 50% 左侧紧贴水平居中位置 */
left: 50%;
/* 再向做移动 40 像素, 水平居中 */
margin-left: -40px;
/* 内容尺寸 */
width: 80px;
height: 80px;
background-color: blue;
}
/* 绝对定位元素 - 垂直居中 */
.bottom {
/* 子元素设置绝对定位 父元素需要设置相对定位 */
position: absolute;
/* 该盒子在父容器右下角 */
/* 顶部移动到垂直中心位置 */
top: 50%;
/* 右边偏移 0 紧贴右侧 */
right: 0;
/* 垂直方向上 , 再向上走 40 像素 使得垂直居中 */
margin-top: -40px;
/* 内容尺寸 */
width: 80px;
height: 80px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</div>
</body>
</html>
実行効果:
