Центр выравнивания содержимого Boostrap div?

Question

Я создаю веб-приложение с bootstrap, и я хочу поместить свой контент div в центр страницы и таблицу с ним, поэтому мне нужна помощь. Вот мой код и предварительный просмотр страницы ниже. Заранее спасибо!

{% extends 'base.html' %}

{% block head %}<title>{{ title }}</title>{% endblock %}

{% block content %}
    <div class="content-section bg-white border border-primary mx-md-n5 shadow-lg px-5 mt-auto">
        <form method='POST' action=''>
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
                <legend class="border-bottom mb-3">Calculate BMI</legend>
                <div class="form-group">
                    {{ form.weight.label(class="form-control-label mb-3") }}
                    {% if form.weight.errors %}
                        {{ form.weight(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.weight.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.weight(class='form-control form-control-lg') }}
                    {% endif %}
                </div>
                <div class="form-group">
                    {{ form.height.label(class="form-control-label mb-3") }}
                    {% if form.height.errors %}
                        {{ form.height(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.height.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.height(class='form-control form-control-lg') }}
                    {% endif %}
                </div>
                <div class="form-group">
                    {{ form.submit(class="btn btn-danger btn-block")}}
                </div>
                <small><i>Formula: [Weight(kg)/Height²(cm²)] * 10000</i></small>
            </fieldset>
        </form>
    </div>
    <hr class="border border-primary shadow-lg mx-md-n5">
    <table class="table table-responsive-md mx-md-n5 shadow-lg table-bordered table-hover">
        <thead class="thead-dark">
            <tr>
            <th scope="col">Table</th>
            <th scope="col">Low Body Weight</th>
            <th scope="col">Normal Weight</th>
            <th scope="col">Overweight</th>
            <th scope="col">Adipositas</th>
            <th scope="col">Too Overweight</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <th scope="row">BMI:</th>
            <td> < 19 </td>
            <td>19-24</td>
            <td>25-29</td>
            <td>30-40</td>
            <td> > 40 </td>
            </tr>
        </tbody>
    </table>


{% endblock %} 

ЗДЕСЬ ССЫЛКА НА ИЗОБРАЖЕНИЕ СТРАНИЦЫ! PREVIEW

Я пытался исправить это, но не могу. Я, должно быть, сделал что-то не так, хотя я тоже проверил документы Bootstrap ...

Answer 1

Чтобы выровнять любой контент-центр по bootstrap, я всегда использую очень простой прием c. Независимо от того, что вы используете, просто напишите text-center в значении атрибута класса . Если вы уже используете какой-либо другой класс, просто введите рядом с ним text-center .

Например. См. Следующий фрагмент.

<div class="content-section text-center">

Также вы можете использовать сеточные системы bootstrap, то есть классы row и col для выравнивания содержимого в соответствии с вашими требованиями.

Надеюсь, вы