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

回答

相關問題