CSS 如何保持图像居中和响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18076173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep an image centered and responsive?
提问by qadenza
I have an image, centered both, horizontally and vertically
我有一个图像，水平和垂直居中
#logo01{
position:absolute;
top:50%;
left:50%;
margin-top:-146px; // half of height
margin-left:-229px; // half of width
cursor:pointer;
}
Now I need a responsive design, so:
现在我需要一个响应式设计，所以：
#logo01{
max-width:45%;
max-height:45%;
}
It works, but position is lost. How can I keep the image centered and responsive at the same time ?
它有效，但位置丢失。如何同时保持图像居中和响应？
回答by Passerby
This is a dirty way around:
这是一种肮脏的方式：
<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%;
}
The trick is to use div.shadowas a "dimension holder", so percentage can work.
诀窍是div.shadow用作“维度持有者”，因此百分比可以起作用。
I call it dirty because the shadow div still possess some space, which will prevent mouse from pointing things underneath it. You can use pointer eventto get around that, but then IE will be left behind, and the image itself would not be pointerble either.
我称之为脏是因为阴影 div 仍然有一些空间，这将阻止鼠标指向它下面的东西。您可以使用指针事件来解决这个问题，但是 IE 将被抛在后面，并且图像本身也不会是可指针的。
回答by Akki619
Try with below css for the container for the image.
尝试使用以下 css 作为图像的容器。
CSS:
CSS：
width: 100%; text-align: center; margin-top:50%
回答by Falguni Panchal
try this
尝试这个
#logo01{
position:absolute;
top:50%;
left:50%;
cursor:pointer;
max-width:45%;
max-height:45%;
display:table;
}
回答by Max Hesari
Below is my suggestion. It works for any <div><img>and ...
下面是我的建议。它适用于任何<div><img>和...
<div class="parent">
<img class="responsive center" src="http://placekitten.com/800/600">
</div>
and the css code is:
和 css 代码是：
.responsive{
max-width:100%;
max-height:100%;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent{
position: relative;
}
just find and test a live demo here: https://jsfiddle.net/veuodbk7/2/
只需在此处找到并测试现场演示：https: //jsfiddle.net/veuodbk7/2/
回答by Kalpesh Patel
You can make use of display:tableand display:table-cellproperty to achieve this.
您可以利用display:table和display:table-cell财产来实现这一点。
HTML:
HTML：
<div id='logo_container'>
<h1 id='logo'><img src = 'http://s18.postimg.org/rwpoh1vo9/forbidden.jpg' alt = 'Logo'/></h1>
</div>
CSS
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%;
}
Here is the fiddle: http://jsfiddle.net/Qe2vG/
这是小提琴：http: //jsfiddle.net/Qe2vG/
You can see that image is aligned central vertically. Also in case of responsive style, just change the heightand widthvalue of #logo_container
您可以看到图像垂直居中对齐。同样在响应式样式的情况下，只需更改height和width值#logo_container
回答by Greg Herbowicz
Using table display:
使用表格显示：
CSS
CSS
img {
max-width: 100%;
height: auto;
display: table;
margin: 0 auto;
}
