【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

韩曙亮

发布于 2023-04-16 14:28:56

4.7K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、问题提出

绝对定位不能通过设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ;

相对定位的盒子模型 , 并没有脱离标准流限制 , 仍然可以使通过设置 margin: auto; 样式的方式令盒子水平居中 ;

举例说明 : 绝对定位的元素需要居中对齐的地方很多 , 如下图所示 , 右侧的固定定位按钮 , 需要在浏览器中居中对齐 , 轮播图中的五个小圆点的容器需要居中对齐 ;

二、绝对定位居中设置

1、设置固定尺寸

使绝对定位元素水平 / 垂直居中最简单的方法就是使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素水平 / 垂直居中 ;

2、先偏移50%再回退固定值

父容器盒子如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题 ;

先设置 50% 的宽度 / 高度偏移量 , 然后再往回退盒子一半宽度 / 高度的偏移量 ;

以水平居中为例 : 200 x 200 大小的盒子 , 通过设置

首先 , 设置 left 左边偏移为 50% , 让子元素的左侧移动到父容器水平中心位置 ;

	left: 50%;

然后 , 设置负数的左外边距 , 令子元素向左移动自身宽度的一半 , 需要提前测量子元素的宽度 ;

	margin-left: -100px;

三、绝对定位元素水平 / 垂直居中

为 80x80 像素尺寸的元素设置水平 / 垂直居中 ;

设置水平居中 : 先设置子元素左侧移动到水平中心位置 left: 50%; , 再设置 margin-left: -40px 向左移动 40 像素 ;

		/* 绝对定位元素 - 水平居中 */
		.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>

执行效果 :