css 图片 始终居中 |css文字从上到下动画特效

/* 方法一：使用 display:flex */
.container {
display: flex; /* 块级元素变为弹性容器 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
/* 方法二：绝对定位 */
.container {
position: relative; /* 父元素相对定位 */
}
img {
position: absolute; /* 图片绝对定位 */
top: 50%; /* 距离顶部50% */
left: 50%; /* 距离左侧50% */
transform: translate(-50%, -50%); /* 平移至中心点 */
}
/* 方法三：使用文本对齐 */
.container {
text-align: center; /* 子元素居中对齐 */
}
img {
display: inline-block; /* 需要变成行内块元素 */
vertical-align: middle; /* 垂直居中 */
}

无论哪种方法，都可以实现图片始终居中的效果，在实际开发中可以根据具体情况选择使用哪种方法。