Center aligning Dropdown component in Bootstrap 4 not working properly

Question

I have reviewed this answer which will help me to accomplish my ultimate goal (by tweaking CSS) but my question is regarding component and styling that bootstrap has provided us.

Problem: The dropdown button is aligned just as required but the dropdown menu is misaligned. Try resizing the window to verify small devices, tablet sizes.

Changing number of columns by modifying col-sm-12 also helps a bit but the misalignment still persists on small devices.

Here's the Minimal, Complete and Verifiable: JsFiddle Example

<div class="container-fluid">
        <div class="row justify-content-center text-center">
            <div class="col-sm-12 align-self-center">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Select Category
                    </button>
                    <div class="dropdown-menu"
                         aria-labelledby="dropdownMenuButton">


                            <a class="dropdown-item" href="#">Category1</a>
                            <a class="dropdown-item" href="#">Category2</a>
                            <a class="dropdown-item" href="#">Category3</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

The two classes which allow us to center align -

justify-content-center : https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment

text-center : https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment

Question:

1. Why don't the above classes apply to the dropdown menu but only to the dropdown button?
2. Are there are any helpful Bootstrap 4 styling classes that I'm missing that would fix that misalignment?

Answer 1

It's because your dropdown menu is positioned absolutely - you need to overwrite it's styles and position it in the center rather than on the left:

.justify-content-center .dropdown-menu {
   left: 50%;
   transform: translateX(-50%);
}

Updated fiddle