最近听了周杰伦的《不爱我就拉倒》，感觉周董现在写歌有点任性，反正我就是要这样写，你们爱听不听。好吧，好吧，有才真的是可以为所欲为。不过，周董应该是少量的一些硬核的歌手，很多歌词都是拳拳到肉，不像大部分歌手的歌那样，一顿呻吟。。。说了一堆废话（//▽//）
言归正传，对于设置了position:absolute的元素怎么设置水平居中。
1
__
最开始的时候一直用了比较蠢的方法，在元素外部套一层div,对外部的div设置绝对定位，然后在设置里面的元素margin:0 auto。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style> #root{
width: 100%; height: 100px; position: relative; } .container{
width: 100%; height: auto; position: absolute; left: 0; top: 40px; } .block{
height: 20px; width: 30px; position: relative; margin: 0 auto; } </style>
<body>
<div id="root">
<div class="container">
<div class="block"></div>
</div>
</div>
</body>
</html>
这种方法其实也不能算是很蠢，虽然多套了一层DOM，但是相对下一种方法来说，这个方法可以适应可变的宽度。
2
__
第二种方法是配合使用left和margin的方法。将left设置为50%，margin-left设置为-width/2，缺点也是显而易见的，需要确切知道元素的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style> #root{
width: 100%; height: 100px; position: relative; background: #eee; } .block{
height: 40px; width: 200px; position: absolute; left: 50%; background: #555; } </style>
<body>
<div id="root">
<div class="block"></div>
</div>
</body>
</html>
3
__
第三种方法，是将left和right同时设置为0，并且设置margin:0 auto,原理至今没搞懂，还是从别人的代码里学过来的， 很少用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style> #root{
width: 100%; height: 100px; position: relative; background: #eee; } .block{
height: 40px; width: 200px; position: absolute; left: 0; right:0; margin: 0 auto; background: #555; } </style>
<body>
<div id="root">
<div class="block"></div>
</div>
</body>
</html>
https://www.doctype.com.cn/archives/118/
今天的文章[CSS] position:absolute水平居中分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/24827.html
