title: How to center 2 floating divs within another div
body: <p>I have the following haml code to display a user avatar and a user nickname + bio</p>
  <pre><code>.page_section.header
    .user_info_container
      //float left
      .avatar_container.pull_left
        .avatar
          %a.fancy{href: &quot;&lt;%= user.original_avatar_url %&gt;&quot;}
            %img{:src =&gt; &quot;/v1/users/&lt;%= user.nickname %&gt;/picture/large&quot;}
      //float left
      .user_details.pull_left
        .name
          %h1 &lt;%= user.name %&gt;
          &lt;%= user.description %&gt;
  
      .clearfix
  </code></pre>
  <p>I would like to center my .user_info_container in the center of the .page_section.header div. How can I achieve that. I have the following css</p>
  <pre><code>.page_section.header {
    padding: 0 0 6px;
    min-height: 120px;
    text-align: center;
    .user_info_container {
      .avatar_container {
        width: 12%
      }
  
      .user_details {
        width: 88%
      }
  
    }
  }
  </code></pre>
  <p><img src="https://i.stack.imgur.com/uvdVT.png" alt="enter image description here" /></p>
  <p>Effect I want to achieve... to center the avatar and text in the middle of the the parent div (.page_section)</p>