css3 transfrom:translate元素居中
我的站长站
2024-10-15
共人阅读
CSS3的transform: translate()函数可以使元素居中排版，下面是transform: translate()函数的例子：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使容器的高度为视口高度 */
}
.item {
position: relative; /* 相对定位 */
transform: translate(-50%, -50%); /* 水平和垂直移动自身的50% */
}
<div class="container">
<div class="item">居中元素</div>
</div>在这个例子中，.container是一个flex容器，它使其子元素.item在水平和垂直方向上居中。
然后.item使用translate()函数将自身沿水平和垂直方向各移动50%，这样它的中心点就会与.container的中心点对齐。