css中怎么讓img圖片居中？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
首先我們來了解一下display屬性實現圖片居中的兩種方法是什么？
1、利用display的table-cell屬性值，再配合text-align: center;與vertical-align: middle;設置圖片居中
2、設置display: flex;，利用彈性布局flex來設置img圖片的居中
下面我們通過簡單的代碼示例，詳細了解一下這兩種方法是怎么實現圖片居中的。
1、利用display:table-cell來實現img標簽圖片的水平和垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img圖片居中</title>
<style>
.demo{
width: 400px;
height: 300px;
border: 1px dashed #000;
display: table-cell; /*主要是這個屬性*/
vertical-align: middle;
text-align: center;
}
.demo img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg" />
</div>
</body>
</html>效果圖：
說明：
在demo盒子中設置display: table-cell;會讓demo盒子作為一個表格單元格顯示（類似 <td> 和 <th>），在設置text-align: center;就會讓img圖片水平居中，設置vertical-align: middle;讓img圖片垂直居中。
2、彈性布局flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img圖片居中</title>
<style>
*{margin: 0;padding:0;}
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
display: flex;
justify-content: center;
align-items: center;
}
.demo img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg" />
</div>
</body>
</html>效果圖：
說明：
設置display: flex;實現flex彈性布局，在設置justify-content: center;讓圖片水平居中對齊，設置align-items: center;讓圖片垂直居中對齊。
感謝各位的閱讀！看完上述內容，你們對css中怎么讓img圖片居中大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
