固定定位的盒子使用margin：0 auto；是无法水平居中的，此时该怎么操作呢？

最新推荐文章于 2024-05-07 13:54:37 发布

pp呆

最新推荐文章于 2024-05-07 13:54:37 发布

阅读量1.1k

点赞数 2

分类专栏： CSS HTML 文章标签：定位 html css3

本文链接：https://blog.csdn.net/gotta125/article/details/107714068

版权

CSS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

固定定位的盒子使用margin：0 auto；是无法水平居中的，此时该怎么操作呢？

第一步
第二步
- 建议
- 完整小栗子

第一步

定位距离左侧（相对于浏览器）50%，此时盒子左侧是在浏览器中间的

    position: fixed;
    top: 0;
    left: 50%;

在这里插入图片描述

显而易见这不是我们想要的效果，我们希望盒子的中线与处于浏览器正中间

第二步

//让盒子左移盒子的百分之五十
transform: translateX(-50%);

在这里插入图片描述
此时盒子就是居中对齐了

建议

在移动的时候最好设置为百分数，避免出现盒子大小改变的情况，设置为固定数值便不是居中对齐的效果了。

完整小栗子

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小粉的移动</title>
    <style>
        .box {
            position: fixed;
            top: 0;
            left: 50%;
            width: 200px;
            height: 200px;
            //兼顾浏览器的兼容性
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        我是小粉
    </div>
</body>

在这里插入图片描述
对于不了解transform属性的朋友这里送上贴心小链接：

https://www.w3school.com.cn/cssref/pr_transform.asp

pp呆

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
固定定位的盒子使用margin：0 auto；是无法水平居中的，此时该怎么操作呢？

绝对定位的盒子使用margin：0 auto；是无法水平居中的，此时该怎么操作呢？第一步第二步建议完整小栗子第一步定位距离左侧（相对于浏览器）50%，此时盒子左侧是在浏览器中间的 position: fixed; top: 0; left: 50%; 显而易见这不是我们想要的效果，我们希望盒子的中线与处于浏览器正中间第二步//让盒子左移盒子的百分之五十transform: translateX(-50%);此时盒子就是居中对齐了建议在移动的时候最好设
复制链接

扫一扫

专栏目录