如何让绝对定位的元素水平居中_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:29:471292검색
如何让绝对定位的元素水平居中:
本章节介绍一下如何让一个绝对定位的元素实现水平居中效果，希望能够给需要的朋友带来一定的帮助。
如果一个块级元素没有采用绝对定位，那么使用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/
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.