【前端】使用CSS使元素居中的几种方式

zhaokang555

发布于 2023-10-17 09:50:40

18800

代码可运行

运行总次数：0

代码可运行

Precondition：

<div class="parent">
    <div class="item">居中</div>
</div>

.item {
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
}

.parent {
    display: -webkit-flex;
    justify-content: center; // 子元素水平居中
    align-items: center; // 子元素垂直居中
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016-04-05，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度