【前端】探讨多种CSS方法实现元素居中的方式
最编程
2024-01-12 13:54:29
...
Precondition：
<div class="parent">
<div class="item">居中</div>
</div>方式一：使用transform
.item {
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
}方式二：使用flex
.parent {
display: -webkit-flex;
justify-content: center; // 子元素水平居中
align-items: center; // 子元素垂直居中
}上一篇： 常用的几种 CSS 居中布局方式
下一篇： 常用的CSS技巧合集