【CSS】讓圖片在高寬固定的div裡水平垂直都居中的三種辦法
阿新 • • 發佈：2021-12-21
效果：
實現一：絕對定位加精算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓角Img示例</title>
<style type="text/css">
.parentDiv{
width:200px;
height:400px;
background-color:yellow;
position:relative;
}
.childImg{
position:absolute;
height:128px;
width:128px;
left:36px;/* (200-128)/2 */
top:136px;/* (400-128)/2 */
}
</style>
</head>
<body>
<div class="parentDiv">
<img class="childImg" src="bggj-08.png" />
</div>
</body>
</html>實現二：無須計算 自動偏移 比上面方法省事
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片垂直水平居中</title>
<style type="text/css">
.parentDiv{
width:200px;
height:400px;
background-color:yellow;
position:relative;
}
.childImg{
height:128px;
width:128px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parentDiv">
<img class="childImg" src="bggj-08.png" />
</div>
</body>
</html>方法三：柔性佈局，但僅在Chrome中好用，Editplus3不支援，別的瀏覽器自己試。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片垂直水平居中</title>
<style type="text/css">
.parentDiv{
width:200px;
height:400px;
background-color:yellow;
display:flex;
justify-content:center;
align-items:center;
}
.childImg{
height:128px;
width:128px;
}
</style>
</head>
<body>
<div class="parentDiv">
<img class="childImg" src="bggj-08.png" />
</div>
</body>
</html>END