居中方法：1、為盒子設定相對定位、圖片設定絕對定位；然後調整圖片位置即可。 2.將img圖片元素設定為區塊級元素；然後利用table-cell、「vertical-align:middle;」來居中。 3.利用flexbox佈局來居中。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css讓圖片在div盒子裡居中
#第一種：用css的position屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1 {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="div1">
<img src="img/1.jpg" / alt="css盒子中的圖如何居中" >
</div>
</body>
</html>效果圖：
第二個：利用css3的新增屬性table-cell, vertical-align:middle;
#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
img {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="div">
<img src="img/1.jpg" / alt="css盒子中的圖如何居中" >
</div>
</body>
</html>【推薦教學：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: flex;
/*!*flex-direction: column;*!可写可不写*/
justify-content: center;
align-items: center;
}
img {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="div">
<img src="img/1.jpg" / alt="css盒子中的圖如何居中" >
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="div">
<img src="img/1.jpg" / alt="css盒子中的圖如何居中" >
</div>
</body>
</html>以上是css盒子中的圖如何居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
