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

关注

原创最新推荐文章于 2026-03-29 03:28:28 发布 509 阅读 AI 写同款· GEO 优化 ›

海思ISP调优实战：从实验室到真实场景的IPC相机图像质量优化指南本文深入探讨海思ISP调优在IPC相机图像质量优化中的实战应用，从实验室标定到真实场景部署的全链路调优方法。重点解决光照动态范围、色温变化和噪声特性等核心问题，提供AE权重表配置、CCM标定、3DNR时域滤波等关键技术方案，帮助实现从理论到实践的图像质量提升。阅读详情

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

收录于