zoukankan html css js c++ java

【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

查看全文

相关阅读:
html不点击提交，自动post
wpf slider刻度
 visual studio 的 code snippet（代码片段）
更换手机号之前
 post提交
 动态修改settings
获取文件数据流+叠加byte数组（给byte数组加包头包尾）
装箱与拆箱
 ue4中窗口打开web地址
 C++通过Callback向C#传递数据，注意问题

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