我如何垂直对齐一个Div，以使背景完美匹配，并且文本位于中间

Question

html 在下面，它用于下拉框：

<div class="dropdown">
    <h1>Dropdown Box</h1>
    <ul>
        <li><a href="#">List Item</a></li>
        <li><a href="#">List Item</a></li>
        <li><a href="#">List Item</a></li>
    </ul>
</div>

CSS 在下面，我尝试了垂直对齐，似乎无法弄清楚。NAV按钮和下拉列表的背景不合格。

.dropdown {
    position: absolute;
}
.dropdown h1 {
    background-color: #62dbfc;
    font-family: "calibri light";
    padding: 15px 35px;
    margin: 0 auto;
}
.dropdown ul {
    margin: 0 auto;
    position: absolute;
    width: 100%;
}
.dropdown li {
    list-style-type: none;
    background-color: #ededed;
    margin: 0 auto;
    font-family: calibri;
    font-size: 24px;
    text-align: center;
    position: relative; 
}

Answer 1

我认为您想要的是将padding-left: 0添加到.dropdown ul样式中。这是使用您的代码的工作示例：

.dropdown { 
    position: absolute;
}
.dropdown h1 {
    background-color: #62dbfc;
    font-family: "calibri light";
    padding: 15px 35px;
    margin: 0 auto;
}
.dropdown ul {
    margin: 0 auto;
    position: absolute;
    width: 100%;
    padding-left: 0;
}
.dropdown li {
    list-style-type: none;
    background-color: #ededed;
    margin: 0 auto;
    font-family: calibri;
    font-size: 24px;
    text-align: center;
    position: relative;
}

<div class="dropdown">
    <h1>Dropdown Box</h1>
    <ul>
        <li><a href="#">List Item</a></li>
        <li><a href="#">List Item</a></li>
        <li><a href="#">List Item</a></li>
    </ul>
</div>

Answer 2

您可以尝试使用FlexBox。这是一个很好的例子：

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/