三个div内的按钮不会居中

Question

我想做的是当屏幕的最大宽度为750px时，我希望使用flexbox将侧边栏内的按钮垂直和水平居中。这是我尝试过的：

<div id="header"></div>

.side-bar {
  height: calc(100vh - 55px);
  width: 18.5%;
  background-color: #F5F5F5;
  overflow: auto;
}

.side-bar .content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: 30px;
  box-sizing: border-box;
}

.side-bar .button {
  margin-bottom: 5px;
}

.side-bar .button:hover i {
  color: dodgerblue;
}

.side-bar .button div {
  text-align: left;
}

.side-bar .button form {
  display: flex;
}

.side-bar .button a {
  align-self: center;
  margin-left: 12%;
  margin-right: 5%;
}

.side-bar .button a i {
  color: black;
  font-size: 18px;
  transition: 0.3s;
}

.side-bar .button input {
  border: none;
  font-size: 15px;
  background-color: Transparent;
}

.side-bar .button input:active {
  color: black;
}

.side-bar .sub-title {
  margin-left: 12%;
}

.side-bar .sub-title p {
  color: #6C6C6D;
  font-weight: bold;
  font-size: 14px;
}

@media (max-width: 750px) {
  .side-bar .content {
    justify-content: center;
  }
  .side-bar .button input {
    display: none;
  }
  .side-bar .sub-title {
    display: none;
  }
}

当我在内容div上使用justify-content时，内容div的子代不会居中。我希望按钮在垂直和水平方向都居中。

关于潜在重复项的说明

在任何人将其标记为重复之前，它不是。我查看了我上一篇文章的解决方案，该解决方案出于相同的原因而并非重复。

我的帖子与以前的帖子有何不同：我的以前的帖子我试图将div居中放置在div中，但没有成功，因此我尝试了另一种方法并获得了想要的结果。现在，我正在尝试将div居中于其他三个div中，但是在使用flexbox使其居中之后，我不明白它没有居中。

Answer 1

我相信以下解决方案可以解决您的问题。内容有些不完整，因为ORDER BY只有.content，我改成了padding-top: 30px。我还删除了padding: 30px 0规则，因为那样，那么，此侧边栏内什么也没有。

关键部分

display: none

摘要

.side-bar .content {
  ...
  padding: 30px 0;
  ...
}

.side-bar {
  height: calc(100vh - 55px);
  width: 18.5%;
  background-color: #F5F5F5;
  overflow: auto;
}

.side-bar .content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 30px 0;
  box-sizing: border-box;
}

.side-bar .button {
  margin-bottom: 5px;
}

.side-bar .button:hover i {
  color: dodgerblue;
}

.side-bar .button div {
  text-align: left;
}

.side-bar .button form {
  display: flex;
}

.side-bar .button a {
  align-self: center;
  margin-left: 12%;
  margin-right: 5%;
}

.side-bar .button a i {
  color: black;
  font-size: 18px;
  transition: 0.3s;
}

.side-bar .button input {
  border: none;
  font-size: 15px;
  background-color: Transparent;
}

.side-bar .button input:active {
  color: black;
}

.side-bar .sub-title {
  margin-left: 12%;
}

.side-bar .sub-title p {
  color: #6C6C6D;
  font-weight: bold;
  font-size: 14px;
}

@media (max-width: 750px) {
  .side-bar .content {
    justify-content: center;
  }
  .side-bar .button input 
  }
  .side-bar .sub-title {
  }
}