站長資訊網(wǎng)
3種方法：1、利用text-align屬性，給包含img的父元素設(shè)置“text-align: center;”即可。2、利用彈性盒布局，給父元素設(shè)置“display: flex;justify-content: center;”即可。3、利用柵格布局，給父元素設(shè)置“display:grid;align-items:center;justify-items:center;”即可。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計(jì)、調(diào)試、自動化測試一體化協(xié)作工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
方法1：利用文本對齊屬性text-align
text-align控制元素中文本行的對齊方式?？梢越oimg設(shè)一個父輩的div，這樣img就可以是div的文本，然后用text-align修改div屬性。（在父輩元素添加屬性）
注意：子元素必須是inline或inline-block；如果子元素也是div的話，需要給子元素設(shè)置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; }
彈性盒布局可以使用少數(shù)幾行css實(shí)現(xiàn)幾乎所有的布局。而且最神的是，即便是n個圖片上面兩行都可以實(shí)現(xiàn)居中，而不必考慮圖片布局和位置。
方法3：利用柵格布局
彈性盒用在導(dǎo)航欄是最普遍的。與之相比，柵格布局是普適的布局系統(tǒng)。
#pic { display: grid; align-items: center; /*塊級方向（縱向）上的全部柵格元素居中對齊*/ justify-items: center; /*行內(nèi)方向（橫向）所有的元素中線對齊*/ }
所以能夠非常方便的處理多張圖片對齊的問題。
（學(xué)習(xí)視頻分享：web前端）
