logo标签列表

将图像在 div 中居中对齐

htmlcss
372
我有以下的div元素。
<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

如何将图像对齐以位于div的中间和中心位置？

14
重复问题，2分钟前已经问过了：CSS：图片居中 - Pekka
1
类似的主题可以在这里找到：https://dev59.com/NGMl5IYBdhLWcg3wTlcl#18516474 - Hashem Qolami
请考虑选择一个答案作为正确答案。 - McSonk
可能是如何将图像在垂直和水平方向上居中对齐的重复问题。 - gbjbaanb
37个回答
470

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

6
“display: block;” 是我的陷阱。谢谢。 - Ujjwal Singh
2
以下代码无法正常工作。我犯了什么错误。<html> <head> <style> #over img { display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <div id="over" style="position:absolute; width:100%; height:100%"> <img src="http://img8a.flixcart.com/image/tablet/f/k/t/asus-nexus-7-125x125-imadngwf2gk44dyd.jpeg"> </div> </body> </html> - nizam.sp
1
如果我们不使用 display: block，则默认为 display: inline，根据 http://www.w3schools.com/cssref/pr_class_display.asp。为什么我们需要使用块？我用它可以工作，但不确定为什么块会居中 img 而行内不会。 - user3731622
因为内联元素不会移动到新的一行，它确实在同一行内。所以 margin:auto 是无效的。 - netalex
这个不起作用。请看下面aerdmans的解决方案。那个很好用。 - AH.
33
这不垂直对齐。 - alpadev
190
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
2
非常简短易懂的解决方案，但似乎只适用于固定的、非百分比的宽度和高度。不过它可以与浮点数一起使用，因此加上+1。- http://jsfiddle.net/2s2nY/2/ - magnetronnie
1
但这只是垂直对齐，没有水平对齐对吗？ - V-SHY
1
如果图像的宽度大于div的宽度，它将无法正常工作。 - Davuz
3
这不垂直对齐。 - Paceman
5
如果我们移除"display:table-cell;"，它就能完美地运行。 - Ahesanali Suthar
126
这也可以使用Flexbox布局完成：

STATIC SIZE 

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

DYNAMIC SIZE 

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>

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

在静态大小中，子元素不需要宽度和高度（至少在我使用的Firefox版本中）。 - Rodrigo
90

在我看来，您还希望将该图像垂直居中于容器中。(我没有看到任何提供此功能的答案)

演示链接:

  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在块级元素上使用inline-block时不太兼容）

1
这并不是说HTML不能用于呈现，而是应该仅用于结构。这项工作应该留给CSS，因此需要使用伪元素。 - deathlock
1
你是什么意思说“不破坏文档流（没有浮动或绝对定位）”？ #over { position:absolute; width:100%; height:100%; 是什么意思？ - Rodrigo
@Rodrigo 这部分是从原始代码中提取的。我不想更改他的代码。居中技术可以在没有它的情况下工作。 - avrahamcool
啊，好的。但现在看来弹性盒布局是更好的解决方案。只需要在 CSS 中添加两行代码，而不需要 span 标签。 - Rodrigo
1
@Rodrigo确实，如果您不需要针对旧版浏览器进行定位，则此flexbox是推荐的方法。 - avrahamcool
显示剩余8条评论
68
img.centered {
   display: block;
   margin: auto auto;
}
1
这非常类似于此答案。 - suhailvs
49

您可以轻松地使用 display:flex CSS属性来完成此操作：

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
这是对我有效的一个。图像深嵌在PUG/SCSS中。谢谢。 - Mogens TrasherDK
这对我也适用。我只是将所有的CSS放到外部div标签中，然后就万事大吉了！所有的图片都居中了。谢谢。 - TommyDo
29
#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;
}
这是正确的答案，它实际上在垂直和水平方向上都居中。 - Alexander Kim
到目前为止最佳答案。 - kiran puppala
17

我对其他解决方案仍然有一些问题。最终，这个对我来说效果最好：

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

你可以在这个页面阅读更多关于该方法的信息。

我还必须添加父级css，但你的代码完美地运行了！ 位置:相对; 宽度:100％; 浮动:left; 溢出:hidden; 最小高度:189像素; - user2593040
15

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>

11

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

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接