问题

Question

问题

如何在包含div？

的内部对齐图像

实施例

在我的示例中，我需要将<img>中的<div>垂直居中class ="frame“：

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame的高度是固定的，图像的高度未知。如果这是唯一的解决方案，我可以在.frame中添加新元素。我试图在IE≥7，Webkit，Gecko上做到这一点。

请参阅jsfiddle here

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;
    
    text-align: center; margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

Answer 1

我所知道的唯一（也是最好的跨浏览器）方式是在两个元素上使用inline-block帮助height: 100%和vertical-align: middle。

所以有一个解决方案：http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* this is required unless you put the helper span closely near the img */
    
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

或者，如果你不想在现代浏览器中有额外的元素并且不介意使用IE表达式，你可以使用一个伪元素并使用方便的表达式将其添加到IE中，该表达式仅运行一次元素，因此不会出现任何性能问题：

IE的:before和expression()解决方案：http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    
    text-align: center; margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

工作原理：

当你有两个inline-block元素彼此靠近时，你可以将每个元素对齐到另一边，所以使用vertical-align: middle你会得到这样的结果：
如果您有一个具有固定高度的块（px，em或其他绝对单位），您可以在%中设置内部块的高度。
因此，在具有固定高度的块中添加一个inline-block height: 100%会将其中的另一个inline-block元素（在您的情况下为<img/>）垂直对齐。< / LI>

Answer 2

这可能有用：

div {
    position:relative;
    width:200px;
    height:200px;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.image {
    min-height:50px
}

参考：http://www.student.oulu.fi/~laurirai/www/css/middle/

Answer 3

matejkramny的解决方案是一个良好的开端，但超大图像的比例错误。
这是我的叉子：

演示：https://jsbin.com/lidebapomi/edit?html,css,output

preview

<小时/> HTML：

<div class="frame">
  <img src="foo"/>
</div>

CSS：

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

Answer 4

3行解决方案：

position: relative;
top: 50%;
transform: translateY(-50%);

这适用于任何事情。

来自here。

Answer 5

PURE CSS解决方案：

http://jsfiddle.net/3MVPM/

CSS：

.frame {  
    margin: 1em 0;  
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}  
img {  
    max-height: 25px;  
    max-width: 160px;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A;  
}

关键材料

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

Answer 6

对于那些登陆这篇文章并且对更现代化的解决方案感兴趣并且不需要支持旧版浏览器的人，您可以这样做：

＆＃13;

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/
    
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content' 
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.  
    **/
    
    /*margin: auto;*/
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}

＆＃13;

<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

＆＃13;

这是笔：http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Answer 7

这样您可以垂直居中（demo）：

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

Answer 8

此外，您可以使用Flexbox获得正确的结果：

.parent {
  align-items: center; /* for vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}

<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

Answer 9

您可以尝试将PI的CSS设置为display: table-cell; vertical-align: middle;

Answer 10

flexbox有一个超级简单解决方案！

.frame {
    display: flex;
    align-items: center;
}

Answer 11

背景图片解决方案 我一起删除了图像元素并将其设置为div的背景，其类为.frame

http://jsfiddle.net/URVKa/2/

至少在IE8，FF6和Chrome13

上工作正常

我检查过，此解决方案无法缩小大于25px高度的图像。有一个名为background-size的属性可以设置元素的大小，但是CSS3会与IE7要求冲突。

我建议您重做浏览器优先级并设计最佳浏览器，或者如果您想使用此解决方案，请获取一些服务器端代码来调整图像大小

Answer 12

您可以尝试以下代码

＆＃13;

.frame{
 display:flex;
 justify-content: center;
 align-items: center;
 width:100%;
}

＆＃13;

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

＆＃13;

Answer 13

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    text-align: center; 
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

关键属性是display：table-cell;对于.frame。 Div.frame显示为与此内联，因此您需要将其包装在块元素中。

适用于FF，Opera，Chrome，Safari和IE8 +。

更新

对于IE7，我们需要添加一个css表达式：

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Answer 14

你可以这样做：

演示

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* here.. */
    left: 50%;           /* here... */
    position: absolute; /* and here */
}

的JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

Answer 15

不确定IE，但在Firefox和Chrome下，如果img容器中有div，则以下css应该有效。至少对我来说效果很好：

div.img-container {
    display:table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Answer 16

使用纯css http://jsfiddle.net/sandeep/4RPFa/72/尝试此解决方案可能是你的HTML的主要问题。定义c lass＆amp;时，不要使用引号你的HTML中image height。

CSS：

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    position:relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom:20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height:0;
    margin:0 auto;
    max-height:25px;
}

编辑：

当我处理img标记时，它会从3px to 2px离开top空格。现在我减少了line-height＆amp;这是工作。的CSS：

    .frame {
        height: 25px;      /* equals max image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height:22px;
        *:first-child+html line-height:24px; /* for IE7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height:0;    
        max-height:25px;
        max-width:160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* webkit browsers */
    }

line-height属性render在不同的浏览器中有所不同。所以;我们必须定义不同的line-height属性浏览器

请查看此示例http://jsfiddle.net/sandeep/4be8t/11/

查看此示例，了解不同浏览器input height differences in Firefox and Chrome

中line-height的不同之处

Answer 17

我的解决方案：http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Answer 18

这适用于现代浏览器（2016年编辑时），如此demo on codepen

所示

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

为图像提供类或使用继承来定位需要居中的图像非常重要。在此示例中，我们使用了.frame img {}，因此只有具有.frame类的div包装的图像才会被定位。

Answer 19

想象你有

<div class="wrap">
    <img src="#">
</div>

和CSS：

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Answer 20

除了像这样的文字之外，还要将图像集中在容器内（它可能是徽标）：

基本上你包裹图像

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Answer 21

解决方案使用表＆amp;表格细胞

有时它应该通过显示为table / table-cell来解决。例如快速标题屏幕。这也是W3的推荐方式。我建议您从W3C.org查看名为Centering things的链接

这里使用的提示是：

绝对定位容器显示为表
垂直对齐显示为表格单元格的中心内容

.container {
position:absolute;
display:table;
width:100%;
height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
}

<div class="container">
  <div class="content">
    <h1 style="text-align:center"> PEACE IN THE WORLD </h1>
 </div>
</div>

我个人实际上不同意为此目的使用助手

Answer 22

对我有用的简单方法：

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

非常适合谷歌浏览器。在不同的浏览器上尝试这个。

Answer 23

如果您可以使用像素大小的边距，只需将font-size: 1px;添加到.frame即可。但请记住，现在.frame 1em = 1px，这意味着您还需要设置边距（以像素为单位）。

http://jsfiddle.net/feeela/4RPFa/96/

编辑：现在它不再集中在Opera ......

Answer 24

使用table和table-cell方法执行此任务，特别是因为您也定位了一些旧版浏览器，我为您创建了一个代码段，您可以运行它并检查结果：

＆＃13;

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}

＆＃13;

<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div>

＆＃13;

Answer 25

我遇到了同样的问题。这对我有用：

<style type="text/css">
div.parent {
     position: relative;
}

img.child {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
</style>

<div class="parent">
    <img class="child">
</div>

Answer 26

您可以使用此

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;/*50% of the height*/
    margin-left: -30px;
 }

Answer 27

CSS网格

如果要在图像容器内垂直对齐单个图像，可以使用以下方法：

.img-container {
  display: grid;
}

img { 
  align-self: center;
}

.img-container {
  display: grid;
  grid-auto-flow: column; 
  background: #BADA55;
  width: 1200px;
  height: 500px;
}

img.vertical-align {
  align-self: center;
}

<div class="img-container">
  <img src="https://picsum.photos/300/300" />
  <img class="vertical-align" src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
</div>

如果要在一个图像容器中对齐多个图像，可以使用以下方法：

.img-container {
  display: grid;
  align-items: center;
}

.img-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  background: #BADA55;
  width: 1200px;
  height: 500px;
}

<div class="img-container">
  <img src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
</div>

请注意，在两种情况下我都使用grid-auto-flow: column，因为否则元素将包装到指定显式网格项的行。在问题代码中，我也看到该项目水平居中。在这种情况下，只需使用place-items: center而不是align-items: center。

Answer 28

我一直在玩填充物进行中心对齐。您需要定义顶级外部容器大小，但内部容器应调整大小，并且可以将填充设置为不同的百分比值。

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

Answer 29

最好的解决方案是

.block{
    /* decor */
    padding:0 20px;
    background:#666;
    border:2px solid #fff;
    text-align:center;
    /* important */
    min-height:220px;
    width:260px;
    white-space:nowrap;
}
.block:after{
    content:'';
    display:inline-block;
    height:220px; /* the same as min-height */
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
    vertical-align:middle;
}
.block span{
    vertical-align:middle;
    display:inline-block;
    white-space:normal;
}

Answer 30

这个怎么样？

mconf

您可以改变class TestYourthing(unittest.TestCase): def setUp(self): self.client = main.app.test_client() # get your token from somewhere self.headers = {'Content-Type': 'application/json', 'Token': token} def test_forbidden_get(self): """GET is forbidden for this route.""" rv = self.client.get('/somewhere', headers=self.headers) self.assertEqual(rv.status_code, 404) # if you need to update locally the headers for a test def test_post_working(self): """testing POST for blah""" # Adding another header here self.headers.update({'X-Blah': 'ping'}) rv = self.client.post('/somewhere', headers=self.headers) self.assertEqual(rv.status_code, 200)

Answer 31

想要对齐文本/标题之后的图像并且两者都在div中吗？

请参阅JSfiddle或“运行代码段”。

确保所有元素（div，img，title等）都有ID或类。

对我来说，在所有浏览器上使用此解决方案（对于移动设备，您必须使用以下代码调整代码：@media）。

＆＃13;

h2.h2red {
color: red; 
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;  
display: block;  
float: left;/*If you want to allign the text with an image on the same row*/  
width: 100px;
heght: 100px;
margin-top: -40px/*Change this value to adapt to your page*/;
}

＆＃13;

<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text alligned after image inside a div by negative manipulate the img postion</h2>
</div>

＆＃13;

Answer 32

我在这里发布的旧JSFiddle链接不再起作用，这可能是downvote的原因。只是为了这是一个有效的答案我仍然想再次发布jQuery解决方案。这适用于应用了v_align类的每个元素。它将在父级中心垂直，并且在重新调整窗口大小时将重新计算。

Link to the JSFiddle

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}

Answer 33

此代码对我有用。

<style>
.listing_container{width:300px; height:300px;font: 0/0 a;}
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
 .listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">  
 </div>

Answer 34

您可以在div中使用表结构

<div class="frame">
     <table width="100%">
         <tr>
            <td vertical-align="middle" align="center" height="25">
                <img src="https://jsfiddle.net/img/logo.png" >  
            </td>
        </tr>
    </table>
</div>

Answer 35

您可以使用grid布局垂直居中图像。

.frame {
  display: grid;
  grid-template-areas: "."
                       "img"
                       "."
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: auto;
}
.frame img {
  grid-area: img;
}

这将创建一个3行1列网格布局，顶部和底部包含未命名的1分数宽的间隔符，以及img高度为auto的区域（内容的大小）。

img将使用它更喜欢的空间，顶部和底部的间隔符将使用剩余高度分割为两个相等的分数，从而导致img元素垂直居中。

http://jsfiddle.net/Kissaki0/4RPFa/20713/

Answer 36

我一直在寻找类似的答案，并且有些建议将图像向左对齐，或者垂直比例缩小了图像，所以我想出了这个解决方案...它使内容在垂直和水平方向上居中。

 .div{
    position: relative;
    overflow: hidden;
 }
 .bantop img {
    position: absolute;
    margin: auto;
    width: 103%;
    height: auto;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
  }

我在几个项目中都使用了它，它就像一个沙姆沙姆

如何垂直对齐div内的图像？

问题

实施例

36 个答案:

演示

CSS

的JavaScript

解决方案使用表＆amp;表格细胞

CSS网格