Html CSS 响应中心 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12645366/
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
CSS Responsive Center Div
提问by user1257255
I would like to center some div which has background image. There is problem with response of this div, because if I set width on 80% and height on 80% the bg-image is not on center. I tried everything, but the picture can't just stand on center and if the browser is smaller or bigger this is very big problem.
我想将一些具有背景图像的 div 居中。此 div 的响应存在问题，因为如果我将宽度设置为 80%，将高度设置为 80%，则 bg-image 不在中心。我尝试了一切，但图片不能只是站在中心，如果浏览器更小或更大，这是非常大的问题。
So if you look at the picture
所以如果你看图片
I want to make this white block responsive.
我想让这个白块响应。
There is a little of css which I've already written, but for now is non-responsive:
我已经写了一些 css，但现在没有响应：
top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;
回答by Frederick Marcoux
I wanted to do the same thing 2 years ago, there's the solution:
2年前我想做同样的事情，有解决方案：
Because you want it responsive, you may use the @mediafunction in CSS3. Like this:
因为您希望它具有响应性，所以您可以使用@mediaCSS3 中的功能。像这样：
@media (max-width: 480px) {
#div {
top: 50%; /* IMPORTANT */
left: 50%; /* IMPORTANT */
display: block;
position: absolute;
background: url(images/background.png) no-repeat center center;
width: 750px;
height: 417px;
margin-top: -208.5px; /* HALF OF THE HEIGHT */
margin-left: -375px; /* HALF OF THE WIDTH */
}
}
The max-widthyou use is the maximum width of the device screen. You just copy it and change the width, height, margin-left and margin-topfor the image. Also, you should change the backgroundtag!
在max-width您使用的是设备屏幕的最大宽度。您只需复制它并更改width, height, margin-left and margin-top图像。另外，您应该更改background标签！
It will center the image on the page.
它将使图像在页面上居中。
You can see an exemple at: Créations MicroWeb - Carrières. The image is totally centered even if you change the window side.
您可以在以下位置查看示例：Créations MicroWeb - Carrières。即使您更改窗口侧，图像也完全居中。
You can add overflow: hidden;on the bodyto make the page unscrollable when the resolution is too low. Like I did.
您可以添加overflow: hidden;在body使页面unscrollable当分辨率太低。就像我一样。
EDIT: JSFiddle
编辑：JSFiddle
回答by monteirobrena
Try with auto margins and display as table:
尝试使用自动边距并显示为表格：
.your-class {
margin-left: auto;
margin-right: auto;
display: table;
}
回答by Steve Glick
You could use CSS transform:
您可以使用 CSS 转换：
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
回答by suresh.g
Please try this:
请试试这个：
img { max-width:100%; max-height:100%; margin:auto; }
回答by kravits88
I have used display: inline-block;on element to center and text-align: center;on parent div.
我display: inline-block;在元素上使用过居中和text-align: center;父 div。
回答by thatidiotguy
You can use margin:0 auto;to center a div horizontally as long as its width is less than that of the container div.
您可以使用margin:0 auto;水平居中 div，只要其宽度小于容器 div 的宽度。
