css中怎么让img图片居中
css中怎么讓img圖片居中？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
首先我們來了解一下display屬性實現(xiàn)圖片居中的兩種方法是什么？
1、利用display的table-cell屬性值，再配合text-align: center;與vertical-align: middle;設(shè)置圖片居中
2、設(shè)置display: flex;，利用彈性布局flex來設(shè)置img圖片的居中
下面我們通過簡單的代碼示例，詳細(xì)了解一下這兩種方法是怎么實現(xiàn)圖片居中的。
1、利用display:table-cell來實現(xiàn)img標(biāo)簽圖片的水平和垂直居中
<!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盒子中設(shè)置display: table-cell;會讓demo盒子作為一個表格單元格顯示（類似 <td> 和 <th>），在設(shè)置text-align: center;就會讓img圖片水平居中，設(shè)置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>
效果圖：
說明：
設(shè)置display: flex;實現(xiàn)flex彈性布局，在設(shè)置justify-content: center;讓圖片水平居中對齊，設(shè)置align-items: center;讓圖片垂直居中對齊。
總結(jié)
以上是生活随笔為你收集整理的css中怎么让img图片居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql数据库 sid_jdbc连接数
- 下一篇： JavaScript如何实现汉字转拼音