Article directory
1. Questions raised
Absolute positioning cannot set the box model to be horizontally centered bymargin: auto; setting the style ;
The relatively positioned box model does not break away from the standard flow restrictions, and the box can still margin: auto;be centered horizontally by setting the style;
For example: Absolutely positioned elements need to be centered in many places, as shown in the figure below, the fixed positioning button on the right needs to be centered in the browser, and the container of five small dots in the carousel needs to be centered;
2. Absolute positioning center setting
1. Set a fixed size
The easiest way to center an absolutely positioned element horizontally /vertically is to use a ruler to measure the width and height of the parent container, and set the horizontal/vertical centering of the element by setting the offsets of the four sides ;
2. Offset by 50% first and then return to a fixed value
If the size of the parent container box changes, there will be problems with the centering set by using the above-mentioned fixed edge offset method;
First set the width/height offset of 50%, and then roll back the offset of half the width/height of the box;
Take horizontal centering as an example: a box with a size of 200 x 200, by setting
- First, set the left offset to 50%, so that the left side of the child element moves to the horizontal center of the parent container;
left: 50%;
- Then, set a negative left margin to move the child element to the left by half of its own width, and you need to measure the width of the child element in advance;
margin-left: -100px;
3. Absolutely positioned elements are horizontally/vertically centered
Sets horizontal/vertical centering for elements of size 80x80 pixels;
- Set horizontal centering: first set the left side of the child element to move to the horizontal center position
left: 50%;, and then set to move 40 pixelsmargin-left: -40pxto the left ;
/* 绝对定位元素 - 水平居中 */
.top {
/* 子元素设置绝对定位 父元素需要设置相对定位 */
position: absolute;
/* 该盒子在父容器左上角 */
/* 上边偏移 0 紧贴顶部 */
top: 0;
/* 左边偏移 50% 左侧紧贴水平居中位置 */
left: 50%;
/* 再向做移动 40 像素, 水平居中 */
margin-left: -40px;
/* 内容尺寸 */
width: 80px;
height: 80px;
background-color: blue;
}
- Set vertical centering: first set the top of the child element to move to the vertical center of the parent container
top: 50%;, and then move up 40 pixels;
/* 绝对定位元素 - 垂直居中 */
.bottom {
/* 子元素设置绝对定位 父元素需要设置相对定位 */
position: absolute;
/* 该盒子在父容器右下角 */
/* 顶部移动到垂直中心位置 */
top: 50%;
/* 右边偏移 0 紧贴右侧 */
right: 0;
/* 垂直方向上 , 再向上走 40 像素 使得垂直居中 */
margin-top: -40px;
/* 内容尺寸 */
width: 80px;
height: 80px;
background-color: red;
}
Code example:
<!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>
Execution effect:
