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

Precondition：

代码语言：javascript复制

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

方式一：使用transform

代码语言：javascript复制

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

方式二：使用flex

代码语言：javascript复制

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

css center transform webkit 前端

0 人点赞