设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
搜索
热搜: 活动 交友 discuz
查看: 1761|回复: 0

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

[复制链接]
发表于 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>


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-3-28 19:44 , Processed in 0.093600 second(s), 28 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表