Центрировать содержимое внутри столбца в Bootstrap 4

Мне нужна помощь в устранении проблемы, мне нужно центрировать содержимое внутри столбца в bootstrap4, пожалуйста, найдите мой код ниже

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

В Bootstrap 4 есть несколько методов горизонтального центрирования ...

• text-centerдля центральных display:inlineэлементов
• offset-*или mx-autoможет использоваться для центрирования столбца ( col-*)
• или justify-content-centerв столбцахrow по центру ( col-*)
• mx-autoдля центрирования display:blockэлементов внутриd-flex

mx-auto(авто х-оси поле) будет центрировать display:blockили display:flexэлементы, имеющие определенную ширину, (%, Vw, точки, и т.д ..). Flexbox используется по умолчанию для столбцов сетки, поэтому существуют также различные методы центрирования flexbox.

Демонстрация методов центрирования Bootstrap 4

В вашем случае используйте mx-autoдля центрирования col-3и text-centerдля центрирования его содержимого.

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

https://codeply.com/go/GRUfnxl3Ol

или, используяjustify-content-centerэлементы flexbox (.row):

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

Также см .:
Центр вертикального выравнивания в Bootstrap 4

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

Включите 'flex' для столбца, как мы хотим, и используйте justify-content-center

Добавьте класс text-centerв свой столбец:

<div class="col text-center">
I am centered
</div>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

Я использовал justify-content-centerкласс вместо того, mx-autoкак в этом ответе .

проверьте на https://jsfiddle.net/sarfarazk/4fsp4ywh/

2020: Аналогичный выпуск

Если ваш контент представляет собой набор кнопок, которые вы хотите центрировать на странице, тогда оберните их в ряд и используйте justify-content-center.

Пример кода ниже:

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>