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

最新推荐文章于 2024-10-05 08:20:00 发布

mini白

最新推荐文章于 2024-10-05 08:20:00 发布

阅读量4.5k

点赞数

文章标签： css3 块元素居中

知识点：

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%);
    }