如何使用 flex-box 在容器 div 中居中对齐整个 div？答案

【问题标题】：how to Center align a whole div inside a container div using flex-box?如何使用 flex-box 在容器 div 中居中对齐整个 div？
【发布时间】：2016-07-21 05:43:19
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

我可以更改您的 html 代码吗？或者你只想要这段代码？？
您可以添加任何其他 div 或 span，但不要删除当前的。

标签： html css flexbox

【解决方案1】：

你可以添加到你的 CSS

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

【讨论】：

您能否添加代码片段或 js fiddle 来回答您的问题。我试过了，但它不起作用，它弄乱了结构。
在这里，您还需要为水平元素添加宽度，我错了，您需要使用 flex-direction: column, jsfindle : jsfiddle.net/3f7ttac2
几乎，但我必须为子 div 添加一个宽度，如果其中的文本长度变大，文本就会环绕。另外，如果我增加孩子的 div 不在中心居中的宽度，我必须使宽度足够大以使其居中对齐。
不增加子元素的宽度我认为不可能实现。

【解决方案2】：

试试这个

.swpm-login-widget-logged {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    }
	.swpm-login-widget-inner {
		width: auto;
	}
		
    .swpm-logged-username,
    .swpm-logged-status,
    .swpm-logged-membership,
    .swpm-logged-expiry {
      display: -webkit-box;
      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-login-widget-inner">
			  <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>
		</div>

【讨论】：

无论如何我可以在左侧项目的右侧添加相等的间距。如果我添加margin-right，我必须为每个元素添加不同的margin，以便它们看起来从左对齐。

【解决方案3】：

我加了

{
    margin:auto;
    width: 255px;
  }

到 .swpm-login-widget-logged

.swpm-login-widget-logged{
    margin:auto;
    width: 255px;
  }


.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>

【讨论】：