利用css3 transform优雅实现元素定位在屏幕正中央

最新推荐文章于 2025-06-13 12:41:56 发布

原创最新推荐文章于 2025-06-13 12:41:56 发布 · 9.7k 阅读

3 ·

CC 4.0 BY-SA版权

Html/Css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种利用CSS3的transform属性实现元素在屏幕中央优雅定位的方法，并提供了完整的示例代码，该方法兼容多种设备分辨率。

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

通常如果想要实现某个元素定位在屏幕的正中央，比如loading图片，我们是根据元素以及屏幕的大小人为计算，或者使用js，显然这两种方法都不够优雅，或者兼容性不好，这里向大家介绍一种个人认为不错的方案供参考。

代码如下：

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>transform</title>
    <style>
        html,body,div,p,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }

        div {
            width: 300px;
            height: 300px;
            background: -webkit-linear-gradient(top, wheat, #28a4c9);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /*向左向上分别平移自身的一半*/
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            text-align: center;
            transition: 1s;
        }

        div:hover {
            width: 550px;
            height: 550px;
            background: -webkit-linear-gradient(top, #28a4c9, wheat);
            transition: 1s;
        }
    </style>
</head>

<body>

    <div>居于屏幕中央，而且不受屏幕分辨率影响</div>

</body>

</html>

效果如下：