【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法

效果：

实现一：绝对定位,精算师最爱。

<!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

posted @ 2021-12-20 21:46 逆火狂飙阅读(240) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

历史上的今天：
2019-12-20 别让情绪扰乱心绪

2025年3月

日

一

二

三

四

五

六

【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法

常用链接

最新随笔

积分与排名

随笔分类 (2323)

个人常用链接

最新评论