我正在嘗試創建影片，其中開始時品牌徽標位于螢屏中間，最后移動到導航欄中的位置。我決定transform: translate使用視口單位。但它不會停留在中心。在較寬的螢屏上，它貼在右側，在較小的螢屏上，它有點偏離中心。另外position: absolute是不是一種選擇，因為我不能把標識回到導航欄。
是否可以僅使用 將我的徽標居中transform: translate？
nav {
max-width: 400px;
display: flex;
justify-content: space-between;
margin: auto;
background: #aaa;
padding: 5px 10px;
}
.brand {
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}
.test {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}<nav>
<div class="brand">Brand</div>
<div class="links">
<a href="#">Home</a>
<a href="#">Profile</a>
</div>
</nav>
<div class="test">TEST</div>uj5u.com熱心網友回復：
初始水平translate值只有在視口寬度小于400px
事實上，由于您的.brand元素處于靜態位置，因此vw當視口大于 400px 時，您不能使用X 軸的單位，因為您的起點不是視口的 (0, 0)，而是 (0, 0) )nav元素：在這種情況下，水平偏移是calc(200px - 50%)— 因為父元素max-width是400px
nav {
max-width: 400px;
display: flex;
justify-content: space-between;
margin: auto;
background: #aaa;
padding: 5px 10px;
}
.brand {
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
animation: backtohome 2s linear 1s forwards;
}
@media (min-width: 400px) {
.brand {
transform: translate(calc(200px - 50%), calc(50vh - 50%));
}
}
@keyframes backtohome {
100% { transform: translate(0, 0); }
}
.test {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}<nav>
<div class="brand">Brand</div>
<div class="links">
<a href="#">Home</a>
<a href="#">Profile</a>
</div>
</nav>
<div class="test">TEST</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384463.html
下一篇：無法在輸入元素上提供輸入