center text horizontally within a flexbox column

Question

I'm trying to create a simple footer with flexbox. But I'd like to center the block of text within the flexbox column, not text-align: center, but actually center the block of text within the column.

Here is a jsfiddle: https://jsfiddle.net/f2yb72c9/

HTML

<div class="row-flex--footer">
          <div class="column">
            <nav>
              <h4 class="hl--list footer__hl">Company</h4>
              <ul>
                <li> <a class="footer__link">About us</a></li>
                <li><a class="footer__link">Careers</a></li>
                <li> <a class="footer__link">News</a></li>
              </ul>
            </nav>
          </div>
          <div class="column">
            <nav> 
              <h4 class="hl--list footer__hl">Surgeons</h4>
              <ul>
                <li> <a class="footer__link">3D Business Manager</a></li>
                <li><a class="footer__link">Plans &amp; Pricing</a></li>
              </ul>
            </nav>
          </div>
          <div class="column">         
            <nav> 
              <h4 class="hl--list footer__hl">Patients  </h4>
              <ul>
                <li> <a class="footer__link">Find a Crisalix surgeon</a></li>
                <li><a class="footer__link">Community</a></li>
              </ul>
            </nav>
          </div>   
        </div>
      </footer>

CSS

ul{
  list-style:none;
  padding:0;
}
.row-flex--footer {
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

footer .column {
    flex: 1 1 auto;
}
@media (min-width: 868px) {
  footer .column {
    flex: 1 1 33.333%;
  }
}

Answer 1

Please have a look at JSFiddle below. I suggest you not to use % in style-sheet but "cols". What you are looking for is :

display: flex;
align-items: center;
justify-content: center;

It is used for centralize content in a flex-box column without using text-align.

    ul{
      list-style:none;
      padding:0;
    }
    .row-flex--footer {
        align-content: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    footer .column {
        flex: 1 1 auto;
        background: coral;
        margin: 5px;
        display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (min-width: 868px) {
      footer .column {
        flex: 1 1 33.333%;
      }
    }

    <footer>
      
    <div class="row-flex--footer">
              <div class="column">
                <nav>
                  <h4 class="hl--list footer__hl">Company</h4>
                  <ul>
                    <li> <a class="footer__link">About us</a></li>
                    <li><a class="footer__link">Careers</a></li>
                    <li> <a class="footer__link">News</a></li>
                  </ul>
                </nav>
              </div>
              <div class="column">
                <nav> 
                  <h4 class="hl--list footer__hl">Surgeons</h4>
                  <ul>
                    <li> <a class="footer__link">3D Business Manager</a></li>
                    <li><a class="footer__link">Plans &amp; Pricing</a></li>
                  </ul>
                </nav>
              </div>
              <div class="column">         
                <nav> 
                  <h4 class="hl--list footer__hl">Patients  </h4>
                  <ul>
                    <li> <a class="footer__link">Find a Crisalix surgeon</a></li>
                    <li><a class="footer__link">Community</a></li>
                  </ul>
                </nav>
              </div>
              <div class="column">            
                <nav>
                  <h4 class="hl--list footer__hl">Support </h4>
                  <ul>
                    <li> <a class="footer__link">Surgeon Help Center</a></li>
                    <li><a class="footer__link">Patient Help Center</a></li>
                    <li><a class="footer__link">Surgeon Help Center</a></li>
                  </ul>
                </nav>
              </div>
              <div class="column">          
                <nav>
                  <h4 class="hl--list footer__hl">Legal</h4>
                  <ul>
                    <li> <a class="footer__link">Universal terms</a></li>
                    <li><a class="footer__link">Privacy policy</a></li>
                    <li><a class="footer__link">Security statements</a></li>
                  </ul>
                </nav>
              </div>
              <div class="column">           
                <nav>
                  <h4 class="hl--list footer__hl">Social</h4>
                  <ul>
                    <li> <a class="footer__link">Facebook</a></li>
                    <li><a class="footer__link">Twitter</a></li>
                    <li><a class="footer__link">Youtube</a></li>
                  </ul>
                </nav>
              </div>
            </div>
          </footer>