站長資訊網
3種方法：1、利用text-align屬性，給包含img的父元素設置“text-align: center;”即可。2、利用彈性盒布局，給父元素設置“display: flex;justify-content: center;”即可。3、利用柵格布局，給父元素設置“display:grid;align-items:center;justify-items:center;”即可。
前端（vue）入門到精通課程：進入學習
API 文檔、設計、調試、自動化測試一體化協作工具：點擊使用
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
方法1：利用文本對齊屬性text-align
text-align控制元素中文本行的對齊方式。可以給img設一個父輩的div，這樣img就可以是div的文本，然后用text-align修改div屬性。（在父輩元素添加屬性）
注意：子元素必須是inline或inline-block；如果子元素也是div的話，需要給子元素設置display：inline/inline-block. 這里子元素img是inline所以省略這一步。該方法適用于inline元素上，比如img的居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #pic { border: 1px solid red; text-align: center; /*表示div的子元素居中*/ } </style> </head> <body> <div id="pic"> <img src="img/2.jpg" class="logo"> </div> </body> </html>
方法2：利用彈性盒布局
css
#pic { display: flex; justify-content: center; }
彈性盒布局可以使用少數幾行css實現幾乎所有的布局。而且最神的是，即便是n個圖片上面兩行都可以實現居中，而不必考慮圖片布局和位置。
方法3：利用柵格布局
彈性盒用在導航欄是最普遍的。與之相比，柵格布局是普適的布局系統。
#pic { display: grid; align-items: center; /*塊級方向（縱向）上的全部柵格元素居中對齊*/ justify-items: center; /*行內方向（橫向）所有的元素中線對齊*/ }
所以能夠非常方便的處理多張圖片對齊的問題。
（學習視頻分享：web前端）
