如何将下拉菜单的子项居中到父项？

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">子项1</a>
    <a href="#">子项2</a>
    <a href="#">子项3</a>
  </div>
</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  width: 200px;
  height: 150px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  margin-top: -75px;
  margin-left: -100px;
  text-align: center;
}

.dropdown-content a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.dropdown-content a:hover {
  background-color: #e0e0e0;
}