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

效果:

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

 实现一:绝对定位加精算

【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>
【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法

 

实现二:无须计算 自动偏移 比上面方法省事

【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法
<!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>
【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法

 

方法三:柔性布局,但仅在Chrome中好用,Editplus3不支持,别的浏览器自己试。

【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法
<!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>
【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法

 

END

上一篇:4、列表的一些知识


下一篇:07 正规式到正规文法与自动机