CSS: Can't center pagination for a WordPress Post Grid

Question

Been completing a fork of a Post Grid plugin for Elementor and I almost have it complete but for some reason, the pagination isn't centered. It's always flush left even though I have text-align: center on. The grid is here: https://www.staging2.datacoral.com/about/page/2/

This is my HTML (I've condensed it a bit)

<div class="col-md-12">
    <nav class='pagination wp-caption void-grid-nav'>
       <a class="prev page-numbers" href="/page/1/">« Previous</a>
       <a class="page-numbers" href="/page/1/">1</a>
       <span aria-current="page" class="page-numbers current">2</span> 
       <a class="page-numbers" href="/page/3/">3</a>
       <a class="next page-numbers" href="/page/3/">Next »</a>
    </nav>
</div>

And the CSS:

.elementor-4997 .elementor-element.elementor-element-e08e85e .void-grid-nav {
    text-align: center;
    width: 100%;
}

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}

Answer 1

For containers with display: flex;, use justify-content: center; to center the content.

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center; /* ⭐️ */
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}

In this case, you can safely remove your .elementor-4997 .elementor-element.elementor-element-e08e85e .void-grid-nav styles.