css 图片定位居中 |css 固定动画怎么写

Method 1：使用 text-align 属性

.container {
width: 400px;
height: 400px;
text-align: center;
}
.container img {
display: inline-block;
}

Method 2：使用 display 和 margin 属性

.container {
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.container img {
margin: auto;
}

Method 3：使用 position 和 transform 属性

.container {
position: relative;
width: 400px;
height: 400px;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Method 4：使用 background-image 属性

.container {
width: 400px;
height: 400px;
background-image: url('yourimage.png');
background-position: center center;
background-repeat: no-repeat;
}

无论您使用哪种方法，都可以在您的 Web 页面中完美地居中显示图片。