码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-01-12 22:43:13      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

如何让绝对定位的元素水平居中:
本章节介绍一下如何让一个绝对定位的元素实现水平居中效果,希望能够给需要的朋友带来一定的帮助。
如果一个块级元素没有采用绝对定位,那么使用margin:0px auto就可以实现此效果,但是对于采用绝对定位的元素并不适用,下面就介绍一下如何实现此效果,代码如下:

<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.softwhy.com/" />     
<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方式设置一个负的外边距,值恰好是元素宽度的一半。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13622

更多内容可以参阅:http://www.softwhy.com/divcss/

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

标签:

原文地址:http://www.cnblogs.com/softwhy/p/5125692.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!