[CSS] position:absolute水平居中

本文主要是介绍[CSS] position:absolute水平居中，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近听了周杰伦的《不爱我就拉倒》，感觉周董现在写歌有点任性，反正我就是要这样写，你们爱听不听。好吧，好吧，有才真的是可以为所欲为。不过，周董应该是少量的一些硬核的歌手，很多歌词都是拳拳到肉，不像大部分歌手的歌那样，一顿呻吟。。。说了一堆废话（//▽//）

言归正传，对于设置了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>