如何保持图像居中和响应？

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

它有效，但位置丢失了。如何保持图像居中并同时响应？

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仍然拥有一些空间，这将阻止鼠标指向它下面的东西。你可以使用pointer event来解决这个问题，但是IE会被遗忘，而且图像本身也不会被指向。

Answer 2

尝试使用以下css作为图像的容器。

CSS：

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

Answer 3

试试这个

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

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

Answer 4

您可以利用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/

您可以看到图像垂直对齐。同样在响应式的情况下，只需更改height的width和#logo_container值

Answer 5

简单且高度有限：

CSS

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

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

Answer 6

以下是我的建议。它适用于任何<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/