详解transform:translate(-50%,-50%)

原创已于 2023-01-09 16:54:36 修改 · 4.1w 阅读

122 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

于 2021-03-26 11:28:15 首次发布

本文介绍了使用CSS的transform属性实现元素居中的一种方法，通过translate(-50%, -50%)将元素在父容器中居中。同时，补充了使用Flexbox布局实现块级元素居中的简便方式，只需设置display: flex, align-items: center, justify-content: center即可。这种方法更加简洁且易于理解，推荐新手学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个其实就是一个位移的属性，translateX在x轴方向上进行移动，反之translateY则是在y轴方向，而translate括号里的两个参数是先x后y的。

这句话的应用场景是实现块居中，具体实现如下：

<style>
        .outer {
            width: 300px;
            height: 300px;
            position: relative;
            background-color: rgb(75, 233, 27);
        }

        span {
            position: absolute;
            background-color: red;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
</style>

<body>
    <div class="outer">
        <span></span>
    </div>
</body>

解释一下代码的作用：

1.首先外层盒子.outer设置了宽和高，因为是父级所以设置了相对定位，默认位置在左上角，并设置了背景色为绿色。

2.齐次是子元素span，将其绝对定位，给定宽高，并让其位置定位在画面中心的右下角（想象屏幕中间有一个十字，这个span就紧贴着第四象限），然后利用transform属性，将其往左平移span自身长度的50%，往上平移span自身长度的50%，这样中间的盒子就居中了。这一步都可以用浏览器的调试工具来自己调，动态看效果，很容易就可以明白