居中可折叠，但内容向下

Question

我有一个下拉菜单，我把它放在页面中央。因为我已经把它绝对定位，当下拉菜单被打开时，菜单向上移动(考虑到由于菜单被打开而增加的高度)。

我想不出更好的解决办法是什么?理想的行为是，在打开下拉菜单之前，菜单完全处于中心位置，然后当打开下拉菜单时，菜单的顶部保持在原位。

我想看看是否有一个CSS唯一的方法来维持定位。否则，我将实现一些JS在加载时定位菜单。

var dropdown = document.getElementById("dropdown");
var show = false;
function showDropdown() {
var dropdownList = document.getElementById("dropdownList");
if (show) {
dropdownList.classList.remove("show");
show = false;
} else {
dropdownList.classList.add("show");
show = true;
}
}
dropdown.addEventListener("click", showDropdown);

.parent {
height: 100vh;
width: 100vw;
background-color: #aaa;
}
.list {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.dropdown > ul {
display: none;
}
.dropdown > ul.show {
display: block;
}

<div class="parent">
<ul class="list">
<li class="dropdown"><a href="#" id="dropdown">Item One</a>
<ul id="dropdownList">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>

Answer 1

问题是你的内容垂直对齐使用translate和top。我已经把它改为margin-top，但它不会是完美的。

你以前的方法的自动垂直居中将可悲地导致你的内容被向上推，当它被谈论;因为这就是垂直对齐的工作原理。

你基本上必须手动确定它应该在页面的哪个位置对齐。

var dropdown = document.getElementById("dropdown");
var show = false;
function showDropdown() {
var dropdownList = document.getElementById("dropdownList");
if (show) {
dropdownList.classList.remove("show");
show = false;
} else {
dropdownList.classList.add("show");
show = true;
}
}
dropdown.addEventListener("click", showDropdown);

.parent {
height: 100vh;
width: 100vw;
background-color: #aaa;
}
.list {
position: absolute;
margin-top: 40vh;
}
.dropdown > ul {
display: none;
}
.dropdown > ul.show {
display: block;
}

<div class="parent">
<ul class="list">
<li class="dropdown"><a href="#" id="dropdown">Item One</a>
<ul id="dropdownList">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>https://stackoverflow.com/posts/66536030/edit#