關(guān)于translate(x,y）及居中問題
當(dāng)translate(x,y)中的x,y都為百分比的時(shí)候是依照什么作為參考？是不是自身大小的百分比？
關(guān)于居中問題
代碼如下：
<!DOCTYPE html>
<html>
<head>?
<meta charset="utf-8">
<title>變形與動畫</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.wrapper {
? padding: 20px;
? background:orange;
? color:#fff;
? position:absolute;
? top:50%;
? left:50%; ?/*求教這 幾行代碼對于居中有何影響及其具體作用？*/
? border-radius: 5px;
? -webkit-transform:translate(-50%, -50%);
? -moz-transform:translate(-50%, -50%);
? transform:translate( -50%, -50%);
}</style>
</head>?
<body>
<div class="wrapper">
我不知道我的寬度和高是多少，我要實(shí)現(xiàn)水平垂直居中 ? ?
</div>
</body>
</html>
請指教，非常感謝!
2016-07-22
糾正一下樓上的。left和top 是position 的屬性。針對的也不是父類的容器。在這里position:absolute.官方給出的解釋為：相對于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。 這么說就很含蓄了。我說不清楚，建議去看看? 深入理解系列??? 張鑫旭講還是不錯(cuò)的
2017-04-24
? position:absolute;
? top:50%;
? left:50%;
?這幾行的作用是div的左上角成為body的中央；
? transform:translate( -50%, -50%);
這行的作用是向左，向上 平移自身寬度，高度的百分之50。這也達(dá)到了自身div的中心點(diǎn)和div中心點(diǎn)重合的作用。
2016-04-23
translate是針對元素本身，left和top是針對其父元素；
這幾行代碼先讓.wrapper的最左邊移動到其父元素的中間，然后再向左移動自身寬度的一半，這樣就達(dá)到了居中的效果了