centre flex containers with normal text alignment

by ian_smithz

HTML

<div class="flex-outer-container">
  <div class="flex-inner-container">
  
    <!-- wrqp an empty div around text to make stop it affecting text -->
    <div>
    <p>Text</p>
    <p>Some more text Some more text</p>
    </div>
    
  </div>
</div>

CSS

.flex-outer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
}

.flex-inner-container {
  display: flex;
  flex: 0 1 auto;
  background: blue;
}