您的位置：首页 > 其它

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

2018-01-11 20:22 525 查看

首先，我们说一下标准流中的元素如何水平居中，很简单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写死了，没办法使用百分比，当子元素的宽度发生改变时，依然会造成子元素不居中，暂时还没有找到解决的办法，工作中没有遇到这样的问题，没有去钻这个牛角尖，有知道的大牛牛们，给个解决办法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 绝对定位居中显示

相关文章推荐

新的分享

章节导航