< p >在網頁設計中，圖片素材的使用是非常高頻的。而對于圖片在網頁中的擺放，許多初學者會遇到一個比較棘手的問題——如何讓圖片居中顯示呢？在CSS中，有很多實現圖片居中顯示的方法，這里介紹其中比較常用的兩種方法。< p >第一種方法是使用CSS的text-align屬性。將text-align屬性設置為center，即可實現圖片居中效果。例如：< pre >img { text-align: center; }< p >這里的img是指圖片元素，也可以根據實際情況將其替換為其他元素的選擇器。此方法的優點是簡單易用，缺點是只對行內元素生效。< p >第二種方法是使用CSS的position和transform屬性。將position屬性設置為absolute，transform屬性設置為translateX(-50%)和translateY(-50%)，即可實現圖片居中效果。例如：< pre >img { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }< p >此方法不僅適用于行內元素，還適用于塊級元素，且居中效果更加精準。但是相對而言會稍微復雜一些。< p >綜上所述，以上兩種方法都可以實現圖片居中顯示的效果，具體使用哪種方法可以根據實際情況來選擇。希望本文可以對初學者們有所幫助。