源于生活

标题: 超出容器高度的图片垂直居中,图片高度不定 [打印本页]

作者: vingoo    时间: 2017-3-8 22:01
标题: 超出容器高度的图片垂直居中,图片高度不定
最简单办法,将图片作为容器的
[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>







欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1