css 巧用 position 绝对定位和 translateXY 实现 div 居中

崔佳宇_

于 2022-07-14 18:50:16 发布

阅读量438

点赞数

CC 4.0 BY-SA版权

分类专栏： # 前端杂谈文章标签： java servlet 前端

本文链接：https://blog.youkuaiyun.com/nullccc/article/details/125790613

前端杂谈专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何通过CSS的position属性和transform:translate方法，使一个300x300像素的蓝色方块在页面上左上角并精确居中。只需一行代码调整，理解并应用绝对定位和变换技巧，让布局更加灵活。

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

<html>
    <head>
        <style>
            .a{
                width: 300px;
                height:300px;
                position:absolute;
                top:50%;
                left: 50%;
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <div class="a"></div>
    </body>
</html>

这样可以得到一个左上角居中的蓝色方块。

只需要添加一行

transform: translate(-50%,-50%);

使得定位角度在 div 中心即可对齐。

全部代码如下：

<html>
    <head>
        <style>
            .a{
                width: 300px;
                height:300px;
                position:absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%,-50%);
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <div class="a"></div>
    </body>
</html>