在div的中心和中间对齐图像

我有以下div

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

如何对齐图像使其位于div的中间和中心？

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.com/images/garcard_symbol.png">
</div>

JSFiddle

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

也可以使用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>

动态尺寸

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}

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

我在本文中找到了示例，它很好地解释了如何使用布局。

在我看来，您还希望该图像在容器内垂直居中。（我没有看到提供该答案的任何答案）

工作小提琴：

1. 纯CSS解决方案
2. 不中断文档流（无浮动或绝对定位）
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;
}

注意：此解决方案非常适合在任何元素内对齐任何元素。对于IE7，将.Centered类应用于块元素时，您将不得不使用另一种技巧来inline-block工作。（因为IE6 / IE7不能与块元素上的内联块一起很好地使用）

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

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

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

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

我在这里提出的其他解决方案仍然存在一些问题。最后，这对我来说效果最好：

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

您可以在此页面上了解有关该方法的更多信息。

基本上，将左右边距设置为自动将使图像居中对齐。

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

这将是一个更简单的方法

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

Daaawx的答案有效，但是我认为如果我们消除内联CSS会更干净。

body {
	margin: 0;
}

#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="example" id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

将img设置为display：inline-block，同时将上级div设置为text-align：center也可以做到

编辑：对于那些正在玩display：inline-block >>>的人，不要忘记例如两个div

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

它们之间确实没有空格（如此处所示）。

避免它们之间的这些（内联块固有的）间隙是最基本的。在我现在写的每两个单词之间可以看到这些差距！:-)所以..希望对您有所帮助。

简单。2018.FlexBox。要检查浏览器支持- 我可以使用

最小解决方案：

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

要获得最广泛的浏览器支持：

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

我尝试了许多方法，但是只有一种方法可用于容器div中的多个内联元素。这是将div中的所有内容对齐在中间的代码。

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

好吧，我们在2016年...为什么不使用flexbox？它也很敏感。请享用。

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

<div id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

建议使用许多答案，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;
}

这对我有用。

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

'注意：在这种情况下，没有将CSS类分配给'BrandImage'

CSS：

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}

当您必须使图像居中对齐并且父div到图像覆盖整个屏幕时，这对我有用。即高度：100％，宽度：100％

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

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

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

标记的答案将不会使图像垂直对齐。flexbox是现代浏览器的合适解决方案。可以将伸缩容器配置为在水平和垂直方向上对齐其项目。

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>

您可以看一下此解决方案：

将框中的图像水平和垂直居中

<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和图像创建单独的样式，然后分别放置它们。假设我要将图像位置设置为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;
}

根据需要修改高度值。

这应该工作。

重要测试：要运行代码段，请单击左按钮“ 运行代码段”，然后单击右链接整页

#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="https://i.stack.imgur.com/qHF2K.png" />
</div>