我用HTML和CSS构建了一个小边栏，看起来像这样：
<body>
<div class='sidebar'>
<div class='sidebar-buttons-section'>
<button class='sidebar-button' id='search'>
...
</button>
<button class='sidebar-button' id='account'>
...
</button>
<!-- and so on ... -->
</div>
</div>
</body>
我希望sidebar-button-section垂直地与中心对齐，所以我制作了一个JavaScript函数来实现这一点。我用这个代码来获得最高利润的确切值：
(document.documentElement.clientHeight - sideBarElement.offsetHeight) / 2;
我将其放入一个名为verticalAlign()的函数中，然后使用两个命令来确保它正常工作：
verticalAlign();// call for the first time
window.onresize = verticalAlign; // align the sidebar
// everytime the window is resized
当我加载HTML时，发生了一些奇怪的事情。我看到的第一件事是：加载页面时的边栏
边距太大，而且没有完全对齐。然而，当我调整页面大小时，会发生以下情况：调整页面大小时的边栏对齐
所有的按钮都完全对齐。为什么当我第一次调用该函数时，它不能正常工作？
提前谢谢。
我找到了一种使用CSS的方法：我需要将此代码添加到.sidebar元素中。
display: flex;
justify-content: center;
align-items: center;
这是一种更好的方法，因为它不需要任何JavaScript。