如何使一个绝对定位的元素居中显示

最新推荐文章于 2022-10-14 16:06:02 发布

XBQ0510Qi

最新推荐文章于 2022-10-14 16:06:02 发布

阅读量2k

点赞数 3

分类专栏： html/css 文章标签：绝对定位居中显示

本文链接：https://blog.csdn.net/XBQ0510Qi/article/details/79038175

版权

html/css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先，我们说一下标准流中的元素如何水平居中，很简单margin:0 auto

但是在绝对定位的，这个属性就失效了，这个时候我们该怎么解决这个问题呢？

首先这里声明，绝对定位的居中显示，前提条件是在有定位流的祖先元素的情况下，即有绝对或相对或固定定位的父级元素，这个时候才有讨论的必要，因为绝对定位元素的参考点是离他最近一层的定位元素，否则是body，body的绝对定位有很多的不可控因素，比如它并不是整个html文档为参考，而是以浏览器的首屏为参考点，我们在这里就不多说了，言归正传，我们就以一个简单的例子为切入口展开，直接上干货：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>绝对定位元素水平居中</title>
		<style>
			.father{
				width: 400px;
				height: 50px;
				background-color: deepskyblue;
				position: relative;
			}
			.son{
				width:100px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 150px;
			}
		</style>
	</head>

	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>

</html>

原理就是，然子元素的左边距离父元素的左边的距离为（父元素的宽-子元素的宽）/2，自然子元素的右边距离父元素的右边也是这个值了,相比这个大家都是可以理解的，这样是可以实现绝对定位的子元素在父元素中居中显示，效果如下

但是这种做法有点个缺点，当父元素或者其自身的宽度发生改变的时候，红色的子元素不在居中，这个时候就诞生了下面的一种诡异的做法，原理是先让红色元素右移父元素的一半（50%），然后再左移其自身的一半，其实还是（父元素的宽-子元素的宽）/2，只不过分了两部，这样就能避免父元素的宽度对子元素的居中显示造成混乱，此时的子元素的样式就是

.son{
				width:100px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 50%;
				margin-left: -50px;
			}

重点是left:50%:向右移动父元素的一半；margin-left：-50px;向左移动自身宽度的一半

第二种其实还是有问题，估计你也看出来了，margin-left写死了，没办法使用百分比，当子元素的宽度发生改变时，依然会造成子元素不居中，暂时还没有找到解决的办法，工作中没有遇到这样的问题，没有去钻这个牛角尖，有知道的大牛牛们，给个解决办法

XBQ0510Qi

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
如何使一个绝对定位的元素居中显示

首先，我们说一下标准流中的元素如何水平居中，很简单margin:0 auto但是在绝对定位的，这个属性就失效了，这个时候我们该怎么解决这个问题呢？首先这里声明，绝对定位的居中显示，前提条件是在有定位流的祖先元素的情况下，即有绝对或相对或固定定位的父级元素，这个时候才有讨论的必要，因为绝对定位元素的参考点是离他最近一层的定位元素，否则是body，body的绝对定位有很多的不可控因素，比如它并
复制链接

扫一扫