【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

相关阅读:
leetcode167 Two Sum II
leetcode18 4Sum
leetcode15 three sum
leetcode-1-Two Sum
SQL优化——select
Hadoop 集群搭建
虚拟机中的两台主机怎么相互拷贝文件
doker5
docker4
docker3

原文地址：https://www.cnblogs.com/heyang78/p/15713069.html