CSS圖片居中的方法：1、利用「text-align: center;」樣式；2、使用「margin: 0 auto;」樣式；3、利用彈性盒佈局；4、利用柵格佈局；5、利用絕對定位中對齊；6、利用background屬性，實現背景圖片居中。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
html
<div id="pic">
<img src=star.jpg class="logo">
</div>一、（最簡單）文字屬性對齊text-align
text-align控制元素中文本行的對齊方式。可以在img設一個父輩的div，這樣img就可以是div的文本，然後用text-align修改div屬性。 （在父輩元素中加入屬性）
注意：子元素必須是inline或inline-block；如果子元素也是div的話，需要為子元素設定display：inline/inline-block . 這裡子元素img是inline所以省略這一步。 此方法適用於inline元素上。例如img的居中
css
#pic {
text-align: center; /*表示div的子元素居中*/
}#二、巧用margin
css
img {
display: block;
width: 100px;
margin: 0 auto;
}以上三點缺一不可。
margin: 0 auto;居中的前提是：
#內行元素必須設定成display: block; img是行內元素必須得設定.如果是input可以不設定。
元素必須要有寬度；自帶寬度的除外，例如button和input等。
根據前提，還可以有另一種方法-修改父元素屬性
#pic {
width: 100px;
margin: 0 auto;
} /*父元素div属于block，所以不用再设 display: block;*/綜上所屬，該方法適用於block元素上。例如div、input的居中
margin的限制：一行顯示兩張圖片時，margin需要相應修改。
三、彈性盒佈局
css
#pic {
display: flex;
justify-content: center;
}彈性盒佈局可以使用少數幾行css實現幾乎所有的佈局。而且最神的是，即使是n個圖片上面兩行都可以實現居中，而不必考慮圖片佈局和位置。
四、柵欄佈局
彈性盒用在導覽列是最普遍的。與之相比，柵格佈局是普適的佈局系統。
#pic {
display: grid;
align-items: center; /*块级方向（纵向）上的全部栅格元素居中对齐*/
justify-items: center; /*行内方向（横向）所有的元素中线对齐*/
}所以能夠非常方便的處理多張圖片對齊的問題。
五、絕對定位中對齊
css
#pic {
position: relative; /*设置绝对定位元素（img）的容纳块，如果不设置，那么容纳块默认为body*/
}
.logo {
position: absolute;
right: 1em; left: 1em; //表示左右距离相等
margin: 0 auto; //与方法二相似
}與方法二最大的差別是，margin的用法是針對block元素的。如果用position就不需要設定block 了。但position一般是用在框架佈局上，如果只是圖片居中有點大材小用，比較麻煩。不建議。
六、背景圖片居中
html
<div></div>
css
div {
height: 1000px; /*高度非常重要*/
background: url(star.jpg) no-repeat top center;
}前提：只要元素內容是空的，就必須設定高度。因為div內容是空的，所以必須要設定高度，否則div是沒有空間的，那麼背景圖片自然也不會顯示。如果是body就不用，因為body自帶高度。
設定為背景圖片的限制是無法設定超連結、title、alt等圖片的屬性。如果不是背景圖片，盡量不要用這種格式。
（學習影片分享：css影片教學）
以上是css讓圖片居中的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
