CSS响应中心 [英] CSS Responsive Center Div

问题描述

我想集中一些有背景图片的div。这个div的响应有问题，因为如果我设置宽度在80％和高度在80％的bg图像不在中心。我尝试了一切，但是图片不能站在中心，如果浏览器更小或更大这是非常大的问题。

所以如果你看图片

我想让这个白色块响应。

我已经写了一些css，但现在是无响应：

  top：20％; 
 left：30％; 
 display：block; 
 position：absolute; 
 background：url（images / background.png）no-repeat; 
 background-size：750px 417px; 
 width：750px; 
 height：417px; 
  

解决方案

我想在两年前做同样的事，有解决方案：

因为你想要响应，你可以使用CSS3中的 @media 函数。像这样：

  @media（max-width：480px）{
 #div {
 top： 50％; / *重要* / 
 left：50％; / *重要* / 
 display：block; 
 position：absolute; 
 background：url（images / background.png）no-repeat center center; 
 width：750px; 
 height：417px; 
 
 margin-top：-208.5px; / * HALF OF HEIGHT * / 
 margin-left：-375px; / * HALF OF WIDTH * / 
} 
} 
  

c $ c> max-width 您使用的是设备屏幕的最大宽度。您只需复制它并更改图像的 width，height，margin-left和margin-top 即可。此外，您应该更改背景标签！

您可以在以下网址查看示例：CréationsMicroWeb - Carrières。

您可以添加 overflow：hidden; body 使分辨率太低时无法浏览页面。像我一样。

编辑： JSFiddle < a>

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.

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:

top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;

解决方案

I wanted to do the same thing 2 years ago, there's the solution:

Because you want it responsive, you may use the @media function in CSS3. Like this:

@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-width you use is the maximum width of the device screen. You just copy it and change the width, height, margin-left and margin-top for the image. Also, you should change the background tag!

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.

You can add overflow: hidden; on the body to make the page unscrollable when the resolution is too low. Like I did.

EDIT: JSFiddle

这篇关于CSS响应中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！