【发布时间】：2020-09-25 22:39:06
【问题描述】：
我正在尝试将我的无序列表置于边栏中的中心，但以下应用于我的 CSS 的解决方案均无效：
align-items: center;
vertical-align: middle;
transform: translateY(-50%);
top: 0;
bottom: 0;
我在这一点上感到非常困惑，并希望您的解决方案。这是我的 SCSS 和 HTML：
$font-primary: "Roboto", sans-serif;
$body-bg: rgb(240, 230, 230);
$sidebar-bg: rgb(255, 210, 235);
$text: black;
$shadow: 0px 0px 100px 0px rgb(207, 207, 207);
body {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed */
background-color: $body-bg;
color: $text;
}
#sidebar {
background-color: $sidebar-bg;
min-width: 300px;
max-width: 300px;
min-height: 100vh;
-moz-box-shadow: $shadow; /*hor-length shadodow-start-point shadow-depth darkness */
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
* {
text-align: center;
}
ul {
padding: 0px;
margin: 0px;
}
li {
text-decoration: none;
list-style: none;
}
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--Makes mobile viewing good-->
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="d-flex">
<nav id="sidebar">
<h1 class="display-3 pt-4 pb-4">DRIP</h1>
<ul>
<li>Finances</li>
<li>Development</li>
<li>DIY</li>
</ul>
</nav>
</div>
<!-- Optional JavaScript -->
<script src="script.js"></script>
<!-- jQuery, Popper, Bootstrapper JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html> 我的目标是让列表相对于它所在的侧边栏居中（如果有意义的话）。即使当我在 UL 项目之间添加样式（例如填充）或添加更多 UL 项目时，我也希望它在侧边栏中保持居中。遗憾的是，我的解决方案都没有影响我希望它们如何影响列表。
【问题讨论】：
-
您可以尝试将
margin: 0 auto;和display: table;添加到您的<ul>标签。看看这个帖子stackoverflow.com/questions/19443013/… -
@KiprasBielinskas 刚刚尝试过，没有引起任何变化:(
-
那么您的实际代码可能与您的问题有点不同，因为运行您的代码并应用 css，
<ul>元素确实会转到容器的中心 see the image -
该代码确实正确地将我的列表水平居中，但我想将其垂直居中（这是问题所在）。请记住，我发布的 CSS 是 SCSS 语法，并且有一个彩色背景可以帮助您可视化侧边栏。