position & transform: translate(-50%, -50%) 实现块元素百分比下居中

最新推荐文章于 2024-10-31 10:19:56 发布

原创最新推荐文章于 2024-10-31 10:19:56 发布 · 3.5w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#css定位

Css / Html 专栏收录该内容

31 篇文章

订阅专栏

知识点：

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

代码示例：

这里写图片描述

HTML

<body>
    <div class="wraper center">
        <div class="inside center"></div>
    </div>
</body>

CSS

    html,
    body {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .wraper {
        width: 80%;
        height: 80%;
        background-color: #ddd; 
    }

    .inside {
        width: 30%;
        height: 30%;
        background-color: blue;
    }

    .center { 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }