如何保持图像居中且具有响应性？

Question

我有一张图片，水平和垂直都居中显示

#logo01{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-146px;  // half of height
    margin-left:-229px;  // half of width
    cursor:pointer;
}

现在我需要一个响应式设计，因此：

#logo01{
    max-width:45%;
    max-height:45%;
}

它可以正常工作，但是位置会丢失。如何同时保持图像居中和响应式？

- qadenza

---

尝试使用 margin-left: auto;。 - Tdelang

@Tdelang auto的margin属性在垂直对齐或绝对定位中不起作用，那这怎么能帮助他呢？ - slash197

Answer 1

这是一个不太好的解决方法：

JSFiddle

<div class="shadow"><img class="logo" src="http://placehold.it/1000x1000" /></div>

div.shadow {
    position:absolute;
    max-width:45%;
    max-height:45%;
    top:50%;
    left:50%;
    overflow:visible;
}
img.logo {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-50%;
    margin-left:-50%;
}

关键在于使用 div.shadow 作为"维度持有者"，这样百分比就能正常工作。

我称之为"脏"，因为阴影 div 仍然占据一些空间，这将阻止鼠标指向其下方的内容。您可以使用指针事件来解决这个问题，但是这会导致 IE 被忽略，而且图像本身也无法用鼠标点击。

- Passerby

---

很棒的解决方案！但在移动设备上，图片会缩小得非常小……虽然周围有很多空间。如何更改以在移动设备上显示100％（或接近）？提前致谢。 - BNB

@BNB 你尝试将“45%”改为更大的数字了吗？ - Passerby

是的，我确实改变了许多组合（并不完全知道它们会做什么），但是如果不将图像“缩小”到屏幕大小的约50％，就无法在移动设备上进行。 在台式机上，代码是完美的。 - BNB

Answer 2

以下是我的建议。它适用于任何 <div>，<img> 和...

<div class="parent"> 

    <img class="responsive center" src="http://placekitten.com/800/600">

</div>

同时，CSS 代码如下：

.responsive{
   max-width:100%;
   max-height:100%;
 }

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

.parent{
  position: relative;
}

在这里找到并测试一个实时演示： https://jsfiddle.net/veuodbk7/2/

- Max Hesari

Answer 3

请尝试以下CSS样式来为图像容器设置样式。

CSS：

width: 100%; text-align: center; margin-top:50%

- Akki619

---

Akki619，容器是 body，已经设置为 100% 和 text-align:center。margin-top 50% 不会将图像垂直居中对齐。 - qadenza

Answer 4

使用表格展示：

CSS

img {
    max-width: 100%;
    height: auto;
    display: table;
    margin: 0 auto;
}

http://jsfiddle.net/herbowicz/a5kumqtv/5/

- Greg Herbowicz

Answer 5

尝试一下

http://jsfiddle.net/hAH6u/2/

#logo01{
    position:absolute;
    top:50%;
    left:50%;   
    cursor:pointer;
    max-width:45%;
    max-height:45%;
    display:table;
} 

- Falguni Panchal

Answer 6

你可以使用 display:table 和 display:table-cell 属性来实现这个效果。 HTML:

<div id='logo_container'>
    <h1 id='logo'><img src = 'http://s18.postimg.org/rwpoh1vo9/forbidden.jpg' alt = 'Logo'/></h1>
</div>

CSS

#logo_container {
    display:table;
    height:100px;
    width:100px;
    margin:0 auto;   
    text-align:center;
    border:1px solid #333;
}

#logo {
    display:table-cell;
    vertical-align:middle;

}
#logo img {
    max-height:80%;
    max-width:80%;
}

这里是代码示例: http://jsfiddle.net/Qe2vG/

你可以看到图片在垂直方向上居中对齐。如果需要响应式样式，只需更改#logo_container的height和width值即可。

- Kalpesh Patel

---

Kalpesh，你说：在响应式样式的情况下，只需更改#logo_container的高度和宽度值即可。在这种情况下，我宁愿更改标志本身的大小。但是我不能。响应式设计不包括固定的宽度和高度。如果我错了，请使您的小提琴具有响应性。 - qadenza

@SunSky：如果你在 #logo_container 中使用百分比来设置高度和宽度，那么它也会起作用。你可以在这里检查：http://jsfiddle.net/Qe2vG/1/。尝试调整浏览器大小并检查。 - Kalpesh Patel

Kalpesh，我尝试了你的新小工具并调整了窗口大小。logo_container 没有被调整大小，而是变得截断。并且在调整大小后不垂直居中。 - qadenza

Answer 7

这个解决方案可能完全可行：

img {
        max-height: 100%;
        max-width: 90%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

- Knectt

Answer 8

由于大多数现代浏览器现在支持CSS网格，因此我使用了CSS网格。我知道这是一篇旧文章，但对于未来不了解CSS网格的任何人，都应该研究一下，它非常有帮助。

无论如何，这是我的解决方案：

在图像周围创建一个div，并给它一个类名，这样你的HTML看起来像这样：

<div class="center-image">
  <img src=.... >
</div>

然后在你的CSS中添加这个：

.center-image {
  display: grid;
  justify-items: center;
}

你的图片应该居中（水平方向）。如果你也想让它垂直居中，只需添加：

align-items: center;

将您的div样式设置为以下内容：

.center-image {
  display: grid;
  justify-items: center;
  align-items: center;
}

- I_am_learning_now