css盒子中的圖如何居中
- 青灯夜游原創
- 2021-02-23 15:59:2716249瀏覽
居中方法：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;
#
nbsp;html>
<meta>
<style>
.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>
<div>
<img alt="css盒子中的圖如何居中" >
</div>
效果：
【推薦教學：
<!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>###效果：###################第四種：利用transform的屬性（缺點：需要支援Html5）### ###nbsp;html>
<meta>
<style>
.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>
<div>
<img alt="css盒子中的圖如何居中" >
</div>
###效果圖：###############更多程式相關知識，請造訪：###程式設計影片###！ ！ ###以上是css盒子中的圖如何居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn