超出容器高度的图片垂直居中，图片高度不定

vingoo · 发表于 2017-3-8 22:01:47

最简单办法，将图片作为容器的

[CSS] 纯文本查看 复制代码

background-img，  background-position:center

实现这个居中

另外一种方法使用CSS3 的transform translation -50% 的方法

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="gbk">
    <style type="text/css">
        .myImg {
            position: relative;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);


        }
        .content {
            height: 100px;
            width: 490px;
            border: 1px solid black;
            overflow: hidden;
        }
    </style>


</head>
<body>
<div id="content" class="content">
    <img src="XXXXXXXXXX" class="myImg">
</div>
</body>
</html>

		自动登录	找回密码
密码			免费注册

[CSS3] 超出容器高度的图片垂直居中，图片高度不定

相关帖子