CSS可以很方便的控制圖片的位置，這讓我們的頁面在美觀性和可讀性上都能得到提升。下面是一些常用的方法。

/*水平居中*/
img{
display: block;
margin: auto;
}
/*左對齊*/
img{
float: left;
margin-right: 10px;
}
/*右對齊*/
img{
float: right;
margin-left: 10px;
}
/*絕對定位*/
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*相對定位*/
.container{
position: relative;
}
.container img{
position: absolute;
top: 0;
left: 0;
}
/*居中垂直對齊*/
.container{
display: flex;
justify-content: center;
align-items: center;
}
.container img{
max-width: 100%;
max-height: 100%;
}

以上就是常用的圖片位置控制方法。我們可以根據實際需求選擇適合自己的方法，讓我們的頁面更加美觀、舒適。