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

最新推荐文章于 2021-09-07 08:21:07 发布
最新推荐文章于 2021-09-07 08:21:07 发布
阅读量2.1k 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ISaiSai/article/details/42008403
版权

最简单办法，将图片作为容器的background-img，  background-position:center 。实现这个居中





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


<!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>

ISaiSai
关注
专栏目录
2023大厂高频面试题之CSS篇
zag666的博客
05-18 1722
css的position属性取值 css选择器优先级和权重 box-sizing属性 CSS 盒子模型 CSS实现三角形 CSS布局 弹性布局display:flex 实现一个垂直水平居中 隐藏页面元素的方法 style-components HTML脱离文档流的方法 block，inline和inlinke-block transition与animation区别...
CSS-1-样式优先级 position 居中 display 弹性布局 盒模型 省略号 坍塌
sharryling
03-26 728
参考链接：https://blog.csdn.net/sinat_36521655/article/details/80140221 不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。 其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，...
图片在容器里水平垂直居中
u011927449的博客
01-18 504
一、水平居中 .wrap{ height: 200px; width:200px; text-align: center; } .wa...
让文本或图片在div容器中垂直居中
一步一步学习javascript;关注web标准
03-04 1787
相信很多朋友在做页面的时候，都会遇到这个问题，而大多数的解决办法不是利用table，就是利用margin，padding属性来达到这种效果。这个情况是在老外的网上看到的。Html代码 any text any height any content, for example generated from DB e
图片在div中垂直居中
YingDaoMonkey的博客
07-11 625
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
图片超出容器大小时显示居中部分
siriva的博客
06-11 739
html代码： <div class="lpic"> <imgsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.dllp.cn%2FFileUpload%2FPremises%2F20170323%2F7161f891-9e5c-40fd-82a6-f4cb7a97adaa.jpg&refer=http%3A%2F%2Fwww.dllp.cn&app=2002&a
css-文字和图片在容器内垂直居中的简单方法
qq_25983579的博客
08-16 868
方法一、使用line-heigh使多行文字居中或图片居中 把文字包裹在一个inline-block元素中vertical-align middle，外部元素line-heigh等于高度 文字居中 <div class="box1"> <span>多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中</span> </div> .box1{
图层中图片垂直水平居中
10-12
/* 防止图片超出容器 */ max-height: 100%; width: auto; height: auto; margin: auto; } ``` 5. 使用line-height和text-align 这种方法适用于图片作为内联元素的情况。 ```css .container { text-align: ...
CSS如何设置高度为屏幕高度_掌握 CSS 精髓：布局
weixin_39620279的博客
11-21 1250
CSS 虽然初衷是用来美化 HTML 文档的，但实际上随着 float、position 等属性的出现，它已经可以起到调整文档渲染结构的作用了，而随着弹性盒子以及网格布局的推出，CSS 将承担越来越重要的布局功能。渐渐地我们发现 HTML 标签决定了页面的逻辑结构，而 CSS 决定了页面的视觉结构。这一课时我们先来分析常见的布局效果有哪些，然后再通过代码来实现这些效果，从而帮助你彻底掌握 CSS ...
CSS不限宽高的居中方式（9种最全）
qq_44947631的博客
07-31 854
前言 垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中。 9 种方法呈现 1、flex 大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。 <div class="wrapper flex-cent
文字和图片垂直居中（vertical-align），图片空白缝隙，文字溢出省略号显示， 底部选择栏案例，三角符号、斜杠盒子案例272
luojunjie1999的博客
07-22 260
文字和图片垂直居中（vertical-align） 解决图片空白缝隙 方法： 1.vertical-align 2.把图片转换为dispay：block 文字溢出省略号显示 1.单行文本溢出省略号显示 <style> div{ width: 100px; height: 50px; background-color: pink; margin: 100px auto;
图片垂直居中的怪办法
weixin_30869099的博客
05-21 48
对于图片垂直居中应该是从事页面重构的朋友经常遇见的。用过table布局，我们都知道，要图片居中，真是易过借火，但是，在div这种块标签中呢？如果div也像：table那样就好了，事实上，真的能如此，当然，要把IE6、7排除在外，代码如下： .box{ display: table-cell; vertical-align: middle; text-align...
img图片大于容器时居中问题
Joanna的博客
06-14 2411
img图片大于容器时居中问题 达到background-size:cover的效果 img{ object-fit:cover;} 需结合宽高一起使用
CSS-大图片img在父级容器div中居中的妙招
鱼酱摆摆的博客
12-05 9048
做法：当图片尺寸大于父级容器时，想让图片居中可以给父容器设置text-align: center; 然后给子元素设置margin: 0 -100%;   原理：让父容器的内容居中时由于图片过大，左边又抵着边界，无法居中，这时给予负值外边距可以允许内容超出外边界。理论上负值的大小只要足够让图片居中就行，但是为了省脑筋，会直接给予最大的负值-100%。   注：图片居中了还没完，经常会搭配o
css图片溢出容器，超出容器怎么解决
m0_60121436的博客
09-07 1855
写手风琴界面的时候发现 li标签里放图片的时候，会超出ul的标签 如图 图片溢出容器 解决办法： 给li标签设置 overflow:hidden; 解决溢出问题 如图
图片垂直居中
sdfsfsdscd的博客
06-10 5113
图片居中在很多地方需要用到，水平居中很好实现，垂直居中有点麻烦，这段时间在项目中遇到了好几处这样的问题，分享给大家。 ###需求一：未知图片大小，使图片在高度固定的区域内垂直居中 大家都习惯在应该是图片垂直居中的地方先设置图片父元素的行高line-height等于其高度height，然后对图片设置vertical-align:middle来达到这种效果。首先我们先来看下这种方式的效果： .wrap...
实现任意图片垂直居中的三种方法
热门推荐
11-03 1万+
在网站开发过程中，可能会有希望图片垂直居中的情况，而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。我总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一： 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的
利用vertical-align:middle实现行内元素的水平垂直居中对齐
oscar92420aaa的博客
05-24 7167
最终实现效果为实现行内元素的水平、垂直居中对齐，效果图如下：    接下来为实现代码：  复制代码 代码如下:       利用vertical-align实现图片垂直居中对齐     #content {  position:absolute;  top:0;right:0;bottom:0;left:0;  margin:auto; 
跨浏览器实现未知高度图片垂直居中的技巧解析
在网页设计中，将图片垂直居中对齐是一个常见的需求，尤其是当图片的高度未知时，这个问题变得更加复杂。一种通用的解决方案是使用CSS的`display`属性来模拟表格单元格的行为，因为表格单元格允许元素沿垂直轴对齐。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值