如何让绝对定位的元素水平居中

快乐打工仔 分类:实例代码

如果一个块级元素没有采用绝对定位,那么使用margin:0px auto就可以实现此效果。

但是对于采用绝对定位的元素并不适用,下面就介绍一下如何实现此效果。

代码实例如下:

<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.pipipi.net/" />     
<title>犀牛前端部落</title>  
<style type="text/css">
.box{
  width:300px;
  height:300px;
  background:blue;
  position:relative;
}
.inner{
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-25px;
  margin-top:-25px;
}
</style>
</head> 
<body> 
<div class="box">
  <div class="inner"></div>
</div>
</body> 
</html>

代码非常简单,是一个比较简单的数学问题,设置了left:50%之后,使元素的左上角水平居中,但是并不是元素的中心点水平居中,这样再使用margin-left方式设置一个负外边距,值恰好是元素宽度的一半,这样元素中心点就水平居中了。对于垂直居中也是同样的道理。

如何让绝对定位的元素水平居中,这样的场景在实际项目中还是用的比较多的,关于如何让绝对定位的元素水平居中就介绍到这了。

如何让绝对定位的元素水平居中属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容