CSS中自動居中是頁面布局時一個比較常用的特性，下面我們來介紹一下如何讓橫豎圖片自動居中。

首先，我們需要明確一點，當(dāng)元素被設(shè)置為絕對定位或相對定位時，我們才能通過設(shè)置屬性來讓其自動居中。其中，絕對定位需要將元素放入相對定位的容器中，以便確定元素的位置，而相對定位是相對自身的。

下面我們通過一些CSS代碼來演示橫豎圖片自動居中的具體實現(xiàn)方法：

/* 父元素設(shè)置 */
.parent {
position: relative; /* 相對定位 */
display: flex; /* 設(shè)置彈性盒子 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
/* 圖片設(shè)置 */
.img {
position: absolute; /* 絕對定位 */
top: 50%; /* 使圖片上下居中 */
left: 50%; /* 使圖片左右居中 */
transform: translate(-50%, -50%); /* 將圖片向左、向上移動自身寬高的一半，實現(xiàn)居中效果 */
}

這里我們使用了flex布局來設(shè)置父元素居中。同時，我們將圖片絕對定位到父元素中，并通過 top 和 left 屬性使其上下和左右居中，最后通過 transform 屬性，將圖片移動到正確的位置。

以上就是如何讓橫豎圖片自動居中的方法，希望對你有所幫助。