让发生绝对定位的元素水平居中的两种方法

最新推荐文章于 2023-04-12 14:31:51 发布

前端小懒虫

最新推荐文章于 2023-04-12 14:31:51 发布

阅读量895

点赞数 4

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44494811/article/details/88432375

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

页面上有两div，子div发生了绝对定位，浮动起来了，脱离文档流，如图
在这里插入图片描述
上图代码如下，这里只展示主要代码：

<style>
    .d1{
        width:400px;
        height:400px;
        border:1px solid red;
        position: relative;
        margin:0 auto;
    }
    .d2{
        width:100px;
        height:100px;
        background: green;
        position: absolute;
    }
    </style>
    <div class="d1">
        <div class="d2"></div>
    </div>

方法1：
给绿色的div套一个大小一样的div，这里称d2_box，让它代替绿色div发生绝对定位，绿色div则发生相对定位，d2_box先相对d1向右偏移50%，即right：50%，然后绿色div向左相对自己偏移自身的一半，即left：50%就可以达到效果了
代码如下：

.d1{
        width:400px;
        height:400px;
        border:1px solid red;
        position: relative;
        margin:0 auto;
    }
    .d2{
        width:100px;
        height:100px;
        background: green;
        position: relative;
        right:50%;
    }
    .d2_box{
        width:100px;
        height:100px;
        position: absolute;
        left:50%;
    }
    </style>
    <div class="d1">
        <div class="d2_box">
                <div class="d2"></div>
        </div>     
    </div>

效果图：
在这里插入图片描述
方法2：
手动计算出绿色div的大小，让绿色div先向右相对d1偏移50%，即right：50%，然后利用margin来向左移动自身一半的位置，这里是margin-left:-50px;
代码如下：

<style>
    .d1{
        width:400px;
        height:400px;
        border:1px solid red;
        position: relative;
        margin:0 auto;
    }
    .d2{
        background: green;
        width:100px;
        height:100px;
        position: absolute;
        left:50%;
        margin-left:-50px;
    }
    </style>
     <div class="d1"> 
        <div class="d2"></div>
    </div>

效果图：
在这里插入图片描述