Как выровнять блок по центру?

Question

[maksell]

<div class="row mb-4">
            <ul class="nav category ml-auto mr-auto">
            {% for category in all_category %}
                <li class="nav-item ">
                    <div class="dropdown _megaMenu">
                        <button class="btn  dropdown-toggle " style= "display: block" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{category}}
                        </button>
                        <div class="dropdown-menu mega">
                            <div class="container-field">
                                <div class="row justify-content-center">
                                    {% for topic in category.topic.all %}
                                        <div class="col-2 ml-2">
                                            <a class="dropdown-item font-weight-bolder" >{{topic}}</a>
                                            {% for menu in all_menu %}
                                                {% if menu.topic == topic and menu.category == category %}
                                                    <a class="dropdown-item" href="/{{category.slug}}/{{menu.slug}}">{{menu.title}}</a>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
            </ul> 
            <form action ="{% url 'search' %}" >
                <div class="search d-flex">
                    <input class="form-control border-right-0 border " type="search" value="{{search}}" placeholder="Искать товары", name="search">
                    <span class="input-group-append">
                        <div class="input-group-text bg-transparent p-0">
                        </div>
                        <button class="btn btn-outline-success " type="submit"><i class="fa fa-search"></i></button>
                    </span>
                </div>
            </form>
        </div>

Ребят, подскажите плиз как выровнять категории по центру, у меня получилось только так

Answer 1

[maksell]

<div class="row justify-content-center mb-4">
            <ul class="nav category ml-auto mr-auto">
            {% for category in all_category %}
                <li class="nav-item ">
                    <div class="dropdown _megaMenu">
                        <button class="btn  dropdown-toggle " style= "display: block" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{category}}
                        </button>
                        <div class="dropdown-menu mega">
                            <div class="container-field">
                                <div class="row justify-content-center">
                                    {% for topic in category.topic.all %}
                                        <div class="col-2 ml-2">
                                            <a class="dropdown-item font-weight-bolder" >{{topic}}</a>
                                            {% for menu in all_menu %}
                                                {% if menu.topic == topic and menu.category == category %}
                                                    <a class="dropdown-item" href="/{{category.slug}}/{{menu.slug}}">{{menu.title}}</a>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
                <li class="nav-item search ">
                    <form class="d-flex" action ="{% url 'search' %}" >
                        <input class="form-control border-right-0 border " type="search" value="{{search}}" placeholder="Искать товары", name="search">
                        <button class="btn btn-outline-success " type="submit"><i class="fa fa-search"></i></button>
                    </form>
                </li>
            </ul>
        </div>

.nav-item.search{
    position: absolute;
    right: 0;
}

Вот это сработало