如何使一张图片在一个较大的div中水平垂直居中

Question

我有一个200 x 200像素的div。我想把一个50 x 50像素的图片放在div的正中间。

应该如何做呢？

我可以通过为div使用text-align:center来水平居中，但是垂直对齐是个问题...

- sleepy

---

以下是两种简单的方法将一个元素在 div 中垂直居中、水平居中或者同时居中（纯 CSS）：https://dev59.com/bmct5IYBdhLWcg3wmOZN#31977476 - Michael Benjamin

这是一个快速的方法，用于对img标签进行居中处理。 - Hitesh Ranaut

Answer 1

在旧浏览器（IE >= 8）中工作

使用绝对定位和自动外边距的结合可以使元素水平和垂直居中。元素位置可以基于父元素的位置，使用相对定位进行定位。查看结果

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

- Jonathan Argentiero

---

将div设置为相对定位：#someDiv { position: relative } - Pavel Nikolov

这对我非常有用，特别是当你没有准确的容器DIV或图像尺寸时。谢谢！ - Charlie74

你也可以通过省略顶部和底部来仅水平居中，通过省略右侧和左侧来仅垂直居中。 - Manuel Hernandez

@YoLudke，是的，你可以。只需包含 max-width:100%; height:auto; 即可。你还可以通过省略某一侧来将其对齐到任何一侧。非常酷。 - robotik

这个解决方案可以添加“max-height: 100%; max-width: 100%;”，使图像完美适应div。 - Wei Kleeff

Answer 2

就我个人而言，我会将其放置在div的背景图像中，CSS代码如下：

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

（假设已经指定了高度和宽度，并且有一个 id 为“demo”的 div，添加背景不应该成为问题）

让浏览器来应对压力。

- bochgoch

---

通常情况下这是最佳答案，除非图像的大小可以比容器的大小小或大。在“小”情况下，一切正常，但在“大”情况下，图像将被裁剪。 - leandre_b

如果您想添加ALT属性，它可能不太友好于SEO/读者。 - e11s

如果我们使用精灵图呢？我正在尝试将背景图片居中，但我正在使用CSS精灵。有什么想法吗？ - Nathan

@Nathan 这不是一项容易的任务。但如果你知道 div 的确切尺寸并在精灵图像周围留出足够的透明空间，以便不显示精灵上的其他图像，那么你是可以做到的。 - Pavel Nikolov

我的图像尺寸总是不同的，当图像大小不同时如何应用它？ - Anirudha Gupta

Answer 3

另一种方法是创建一个带有 valign 属性的 table，这样做不管你是否知道 div 的高度都可以实现。

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

但是尽可能只使用css。

- andyk

---

我知道这会被点踩。我想把它列出来只是为了完整起见，但是算了。 - andyk

你知道吗？使用桌子会导致失明。 - Pekka

尽可能使用CSS，但这绝对是一个有用的备选方案。不要忘记我们最初停止使用表格的原因。使用任何最灵活的解决方案。有时这就是它。 - Russell Leggett

注意：这在2008年可能是“可以接受的”，但在2012年，这是绝对不能接受的。 - animuson

反对，animuson：其他所有解决方案都假设您知道图像在浏览器中显示的大小，如果您设计一个响应式布局，其中图像为“height:100%”，并且它的容器为“width:25%”，则会留下未知大小的x或y边距。 - iHaveacomputer

Answer 4

我会给你更大的

设置position:relative;，然后针对你的图片做以下处理：

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

只有在你知道图像和包含 div 的尺寸时，此方法才有效。这也允许您将其他项目放入包含 div 中...而使用行高之类的解决方案则不会起效。

编辑：请注意...您的边距应为图像大小的负一半。

- Tim K.

---

http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/ - Pavel Nikolov

我使用了这个代码，但是去掉了 margin 的部分，并添加了 -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);。这样可以得到更通用的解决方案，不需要元素大小信息。 - Jon

尝试过这个，如果图像小于div，则将其向上移动。 - some_guy

Answer 5

这个运行正确：

display: block;
margin-left: auto;
margin-right: auto 

如果上述方法只能使文本水平居中，可以尝试以下方法：

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

- Chris

---

最简单的方法是使用 display: block; margin: auto;。 - ch271828n

Answer 6

使用Flexbox：

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}

- Rahul Paru

---

不错！这真的起作用，如果你不能像上一个答案建议的那样将图片作为背景放置的话，这会帮助到你。 - TheKidsWantDjent

Answer 7

这里有另一种将任何内容居中的方法。

演示链接

HTML：（仍然简单）

<div class="Container">
    <div class="Content"> /*this can be an img, span, or everything else*/
        I'm the Content
    </div>
</div>

CSS：

.Container
{
    text-align: center;
}

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}

好处

容器和内容的高度是未知的。

不需要特定的负边距、不需要设置行高（因此它适用于多行文本）和不需要脚本即可居中，还可以很好地与 CSS 过渡效果配合使用。

- avrahamcool

---

+1。非常好的解决方案和优秀的SO答案。我想知道是什么原因让浏览器只需添加before伪类和content: ""就能产生（预期的）行为（因为我们中的许多人可能尝试过display: inline-block和vertical-align: middle但没有成功）。 - try-catch-finally

这其实非常简单。你在容器内创建一个空元素，它的高度跨越了 100%，然后将你的元素与这个空元素的中心对齐。这样就可以使你的元素位于容器的正中央。 - avrahamcool

Answer 8

稍微晚了点，但这是我用来垂直对齐父元素中的元素的解决方案。

当你知道容器div的大小，但不知道包含图像的大小时，此方法会很有用（在使用灯箱或图像轮播时经常遇到这种情况）。

以下是要尝试的样式：

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

- Kshitij Chopra

---

感谢您向我展示如何使CSS div表现得像表格单元格，现在我可以避免花费无数个小时来让CSS做传统HTML表格单元格所能轻松完成的事情。 - Kmeixner

将"text-align:center;"添加到容器(div)中，如果您正在将最大高度/宽度应用于未知大小的图像，则该图像将在两个方向上居中。 - Steve-O-Rama

在我看来，最佳答案。别忘了 text-align: center; - alex toader

请注意：默认情况下，img元素是内联的，需要设置为“block”才能垂直居中。 img { display:block; } - David Douglas

这个答案似乎比其他得到更多投票的答案更好。它可以在不考虑第三方框架或多个元素样式组合的情况下工作。 - Felipe Leão

Answer 9

我发现Valamas和Lepu的答案是最直接的答案，处理未知大小的图像或您不想硬编码到CSS中的已知大小的图像。 我只有几个小调整：删除无关样式，将其大小设置为200px以匹配问题，并添加max-height / max-width来处理可能过大的图像。

div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

- svachalek

Answer 10

我们可以使用flex轻松实现这一点，无需使用background-image。

<!DOCTYPE html>
<html>
<head>
   <style>
      #image-wrapper{
         width:500px;
         height:500px;
         border:1px solid #333;
         display:flex;
         justify-content:center;
         align-items:center;
      }
   </style>
</head>
<body>

<div id="image-wrapper">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

</body>
</html>

- yasarui