html - 如何使用 flex-box 将容器 div 中的整个 div 居中对齐？

Question

我正在尝试使用 flex box 进行布局，我已经尝试了所有组合，但我无法实现我想要的效果。我希望整个“<div class="swpm-login-widget-logged">”位于容器的中心，而不改变结构。是否可以使用 flex-box 来实现。

当前结构:

所需结构:

.swpm-logged-username,
.swpm-logged-status,
.swpm-logged-membership,
.swpm-logged-expiry {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 15px;
  margin-bottom: 5px;
}
.swpm-logged-username-label,
.swpm-logged-status-label,
.swpm-logged-membership-label,
.swpm-logged-expiry-label {
  -webkit-flex-basis: 150px;
  -ms-flex-preferred-size: 150px;
  flex-basis: 150px
}
.swpm-logged-logout-link a {
  display: inline-block;
  padding: 5px 15px;
  color: #fff;
  background-color: #83a83d;
  text-decoration: none;
  border-radius: 3px;
  margin-top: 15px;
}

<div class="swpm-login-widget-logged">
  <div class="swpm-logged-username">
    <div class="swpm-logged-username-label swpm-logged-label">Logged in as:</div>
    <div class="swpm-logged-username-value swpm-logged-value">vikrant negi</div>
  </div>
  <div class="swpm-logged-status">
    <div class="swpm-logged-status-label swpm-logged-label">Account Status:</div>
    <div class="swpm-logged-status-value swpm-logged-value">Active</div>
  </div>
  <div class="swpm-logged-membership">
    <div class="swpm-logged-membership-label swpm-logged-label">Membership:</div>
    <div class="swpm-logged-membership-value swpm-logged-value">Paid Members</div>
  </div>
  <div class="swpm-logged-expiry">
    <div class="swpm-logged-expiry-label swpm-logged-label">Account Expiry:</div>
    <div class="swpm-logged-expiry-value swpm-logged-value">Never</div>
  </div>
  <div class="swpm-logged-logout-link">
    <a href="?swpm-logout=true">Logout</a>
  </div>
</div>

Answer 1

你可以添加到你的css中

.swpm-login-widget-logged {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}