title: how to Center align a whole div inside a container div using flex-box?
body: <p>I'm trying to make a layout using flex box and i've tried every combination but i'm not able to achieve what i want to have.
  I want this whole "<code>&lt;div class="swpm-login-widget-logged"&gt;</code>" to at the center of the container wihout any change in the structutre. 
  Is that possible to achieve using flex-box. </p>
  
  <p>Current structure: <a href="https://i.stack.imgur.com/m9u4A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m9u4A.png" alt="Current structure"></a></p>
  
  <p>Required structure: <a href="https://i.stack.imgur.com/UVj9K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UVj9K.png" alt="required structure"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="swpm-login-widget-logged"&gt;
    &lt;div class="swpm-logged-username"&gt;
      &lt;div class="swpm-logged-username-label swpm-logged-label"&gt;Logged in as:&lt;/div&gt;
      &lt;div class="swpm-logged-username-value swpm-logged-value"&gt;vikrant negi&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="swpm-logged-status"&gt;
      &lt;div class="swpm-logged-status-label swpm-logged-label"&gt;Account Status:&lt;/div&gt;
      &lt;div class="swpm-logged-status-value swpm-logged-value"&gt;Active&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="swpm-logged-membership"&gt;
      &lt;div class="swpm-logged-membership-label swpm-logged-label"&gt;Membership:&lt;/div&gt;
      &lt;div class="swpm-logged-membership-value swpm-logged-value"&gt;Paid Members&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="swpm-logged-expiry"&gt;
      &lt;div class="swpm-logged-expiry-label swpm-logged-label"&gt;Account Expiry:&lt;/div&gt;
      &lt;div class="swpm-logged-expiry-value swpm-logged-value"&gt;Never&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="swpm-logged-logout-link"&gt;
      &lt;a href="?swpm-logout=true"&gt;Logout&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>