中心基於百分比的元素

-1

我見過一些人這樣做，但它看起來不太相同我想在屏幕中間居中這個基於百分比的div，並使其響應。我做了固定但響應會更好的任何想法？身高= 50％寬度的百分比= 60％中心基於百分比的元素

2015-12-14 Jhodges11

這是最好的發佈你的東西，爲了做到這一點已經試過一個例子。即你見過的是什麼，並且看起來不一樣？ – Klors

這是我的固定版本，我嘗試了一些解決方案，但我回到固定，所以我不能在這裏複製。 .center { height：600px; 寬度：700px; 職位：固定; top：50％; 剩餘：50％; margin-top：-300px; margin-left：-350px; text-align：center; } – Jhodges11

這是我現在有建議和工作， .center { 高度後：50％的像素; 寬度：50％; 職位：固定; top：50％; 剩餘：50％; transform：translate（-50％，-50％）; text-align：center; } – Jhodges11

使用transform。它可以讓你在不知道他的尺寸的情況下居中放置。

/** that's the trick **/ 
 
.centered { 
 
    position: fixed; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
} 
 

 

 
/* only for snippet **/ 
 
.yellow { 
 
    background:yellow; 
 
    width: 200px; 
 
    height: 300px; 
 
    z-index: 1; 
 
} 
 
.red { 
 
    z-index:0; 
 
    background:red; 
 
    width: 50%; 
 
    height: 60%; 
 
}

<div class="centered yellow"></div> 
 
<div class="centered red"></div>

來源

2015-12-14 17:31:26

謝謝我有類似的東西，但它並沒有在第一次工作 – Jhodges11

left: 20%; 
top: 25%;

，如果周圍的容器這隻作品（身體？）具有有效height和width設置

來源

2015-12-14 17:26:26 Johannes

中心基於百分比的元素

回答

相關問題