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

最新推荐文章于 2024-10-15 16:13:47 发布

原创最新推荐文章于 2024-10-15 16:13:47 发布 · 461 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #servlet #前端

前端杂谈专栏收录该内容

5 篇文章

订阅专栏

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

<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>