[CSS] position:absolute水平居中

最新推荐文章于 2024-08-07 09:22:13 发布

leo_howl

最新推荐文章于 2024-08-07 09:22:13 发布

阅读量1.3w

点赞数 14

分类专栏：文章文章标签： css position:absolute 水平居中

本文链接：https://blog.csdn.net/u013050330/article/details/102988218

版权

文章专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

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