css如何讓img圖片居中？ css的display屬性實作圖片居中（程式碼實例）
- 青灯夜游原創
- 2018-10-19 11:10:4170735瀏覽
在我們開發前端頁面的時候，為了讓頁面效果美觀，會讓圖片呈現居中效果。那麼css怎麼讓img圖片居中顯示呢？本篇文章帶給大家css如何讓img圖片居中？ css的display屬性實作圖片居中（程式碼實例），讓大家可以了解並掌握css的display屬性設定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="css如何讓img圖片居中？ css的display屬性實作圖片居中（程式碼實例）" / alt="css如何讓img圖片居中？ css的display屬性實作圖片居中（程式碼實例）" >
</div>
</body>
</html>效果圖：
說明：
在demo盒子中設定display: table-cell;會讓demo盒子作為一個表格單元格顯示（類似
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="css如何讓img圖片居中？ css的display屬性實作圖片居中（程式碼實例）" / alt="css如何讓img圖片居中？ css的display屬性實作圖片居中（程式碼實例）" >
</div>
</body>
</html>效果圖：
說明：
設定display: flex;實現flex彈性佈局，在設定justify-content: center;讓圖片水平居中對齊，設定align-items: center;讓圖片垂直居中對齊。
總結：以上就是css的display屬性實現圖片居中兩種方法的全部介紹，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS3影片教學，Html5影片教學，bootstrap影片教學！
以上是css如何讓img圖片居中？ css的display屬性實作圖片居中（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn