3種方法：1.利用text-align屬性，為包含img的父元素設定「text-align: center;」即可。 2.利用彈性盒佈局，為父元素設定「display: flex;justify-content: center;」即可。 3.利用柵格佈局，為父元素設定「display:grid;align-items:center;justify-items:center;」即可。
本教學操作環境：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" alt="css中img不知道寬高怎麼實現居中" >
</div>
</body>
</html>方法2：利用彈性盒佈局
css
#pic {
display: flex;
justify-content: center;
}
彈性盒佈局可以使用少數幾行css實現幾乎所有的佈局。而且最神的是，即使是n個圖片上面兩行都可以實現居中，而不必考慮圖片佈局和位置。
方法3：利用柵欄佈局
彈性盒用在導覽列是最普遍的。與之相比，柵格佈局是普適的佈局系統。
#pic {
display: grid;
align-items: center; /*块级方向（纵向）上的全部栅格元素居中对齐*/
justify-items: center; /*行内方向（横向）所有的元素中线对齐*/
}
所以能夠非常方便的處理多張圖片對齊的問題。
（學習影片分享：web前端）
以上是css中img不知道寬高怎麼實現居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
