CSS教程

【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>
复制代码

 

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

复制代码 
<!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

这篇关于【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航