CSS Responsive Center Div

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

所以，如果你看一下图片

block on center

我想使这个白色块状响应。

有，我已经写CSS的一点，但现在是无响应：

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

来源

2012-09-28 user1257255

我想做同样的事情，2年前，有个解决办法：因为你想它反应灵敏，您可以使用@media功能CSS3

。像这样：

@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 */ 
    } 
}

您使用的max-width是设备屏幕的最大宽度。您只需将其复制并更改图像的width, height, margin-left and margin-top即可。此外，您应该更改background标签！

它将以图片为中心在页面上。

你可以看到一个例子：Créations MicroWeb - Carrières。即使您更改了窗口，图像也完全居中。

如果分辨率过低，您可以在body上添加overflow: hidden;，以使页面不可滚动。像我一样。

编辑：JSFiddle

来源

2012-09-28 18:33:02

但如何让它负责？ http://jsfiddle.net/jZKyE/ – user1257255

响应像自举？背景调整与设备屏幕？ –

是的，如果有人有更小的屏幕显示更小的背景图片，并且如果有人有更大的屏幕来显示它只有全高/宽度图片，没有更多。 – user1257255

您可以使用margin:0 auto;只要水平作为其宽度小于居中一个div的集装箱股份。

来源

2012-09-28 18:25:47 thatidiotguy

肯定的，但在div应该是绝对的定位，所以这不是选项。 – user1257255

请试试这个：

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

来源

2012-09-28 18:51:25

-1

我对父母的div使用display: inline-block;元素居中和text-align: center;。

来源

2014-08-13 05:14:19 kravits88

与汽车的利润率和显示尝试为表：

.your-class { 
    margin-left: auto; 
    margin-right: auto; 
    display: table; 
}

来源

2015-09-16 13:56:08 monteirobrena

这背后的理论是什么？ – Phil

你可以使用CSS变换：

position: fixed; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%);

来源

2017-01-26 20:36:28

CSS Responsive Center Div

回答

相关问题