将div元素居中

<div class="user-box text-center">
                        <img src="assets/images/users/user-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-thumbnail avatar-md">
                        <div class="dropdown">
                            <span class="user-name h5 mt-2 mb-1 d-block">Nowak Helme</span>
                        </div>
                        <p class="text-muted">Admin Head</p>
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <div class="dropdown">
                                    <a href="#" class="text-muted dropdown-toggle h5 mt-2 mb-1 d-block" data-toggle="dropdown"  aria-expanded="false">
                                        <i class="fas fa-cog"></i>
                                    </a>
                                    <div class="dropdown-menu user-pro-dropdown">

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <i class="fe-user mr-1"></i>
                                            <span>My Account</span>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <i class="fe-settings mr-1"></i>
                                            <span>Settings</span>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <i class="fe-lock mr-1"></i>
                                            <span>Lock Screen</span>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <i class="fe-log-out mr-1"></i>
                                            <span>Logout</span>
                                        </a>

                                    </div>
                                </div>
                            </li>

                            <li class="list-inline-item">
                                <a href="#">
                                    <i class="fas fa-power-off"></i>
                                </a>
                            </li>
                        </ul>
                    </div>

以上是我的代码。我想将下拉列表的用户框元素居中。请帮助我解决我的问题。我附上了屏幕截图供您参考。我已经在线阅读了一些参考资料,但找不到适合该解决方案的参考资料。

Screenshot

评论
  • 你无可取代
    你无可取代 回复
    .wrapper {
      background: #eee;
      width: 15em;
      height: 10em;
      margin: 0 auto;
      
      /* center */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    <div class="wrapper">
      <div>Center Thyself</div>
    </div>