CSS 水平垂直居中方法四

最新推荐文章于 2025-04-24 07:00:00 发布

原创最新推荐文章于 2025-04-24 07:00:00 发布 · 585 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #水平垂直居中

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素精确居中的方法。通过设置绝对定位并结合transform属性，可以使一个红色背景的区块始终处于浏览器窗口的正中央。这种方法适用于创建固定位置的UI组件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: green;
        }
        .center{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 30%;
            height: 20%;
            background: red;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div class="center"></div>
</body>
</html>