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

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</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 id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>

将img设置为显示:inline-block，同时将上级div设置为text-align:中心也可以完成这项工作

编辑:那些玩显示:inline-block >>>的人不要忘记，例如两个divs喜欢

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

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

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

许多答案建议使用margin:0 auto，但只有当你试图使居中的元素不在左或右浮动时，即float css属性未设置时，这才有效。为了做到这一点，将display属性应用到table-cell，然后将左右边距应用到auto，这样你的风格看起来就像style="display:table-cell;margin:0 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;
}

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

在我看来，您还希望图像在容器中垂直居中。(我没有看到任何答案提供了这一点)

Working Fiddle:

1. 纯CSS解决方案
2. 不中断文档流(没有浮动或绝对定位)
3. 跨浏览器兼容性(甚至包括IE6)
4. 完全响应。

超文本标记语言

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

试试下面的代码:

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

和CSS:

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

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

我在文章中找到了这个例子，它很好地解释了如何使用布局。

我仍然有一些问题与其他解决方案在这里提出。最后，这对我来说是最好的:

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

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

使用定位。下面的方法对我很有效……

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

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

你可以看看这个解决方案:

水平和垂直定心一个盒子中的图像

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

这招对我很管用:

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

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

CSS

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

超文本标记语言

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

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

好吧，我们在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>

一个简单的方法是为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>

这招对我很管用。

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

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

根据您的需要修改高度值。

CSS文件

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

这应该有用。

重要的测试:要运行代码片段，单击左键RUN代码段，然后右键完整的页面

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

你可以通过使用display:flex CSS属性轻松做到这一点:

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


  

使用引导带align-items和justify-content。请看下面的例子:

<div class="well" style="align-items:center;justify-content:center;">
<img src="img_source" height="50px" width="50px"/>
</div>

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

< br >

获得尽可能广泛的浏览器支持:

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

我向CSS添加了更多的属性。像这样:

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

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

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

这为我工作，当你必须居中对齐图像和你的父div图像已经覆盖整个屏幕。即高度:100%，宽度:100%

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

只需设置父div css属性“text-align:center;”

 <div style="text-align:center; width:100%">
<img src="img.png">
</div>

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放在div的中心，但对于我的情况下，我只需要这种类型的组件在ajax加载进度，所以我简单地尝试了以下解决方案，希望这对你有帮助!

<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>

大多数解决方案都不起作用，因为100%高度的div并不意味着完整的浏览器高度。

使用高度:100vh;的工作原理。

<style type="text/css">
body {
margin: 0;
}


#over {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
</style>


<div id="over">
<img src="test.png" alt="test" width="600">
</div>