如何在下拉菜单中居中对齐按钮？

<div class="dropdown">
  <button class="btn">按钮</button>
  <ul class="dropdown-menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

.dropdown {
  position: relative;
  width: 200px;
  height: 30px;
}

.btn {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}

.dropdown-menu {
  background-color: #fff;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  font-size: 14px;
  list-style: none;
  padding: 0;
  display: none;
}

.dropdown-menu li {
  padding: 5px;
}

.dropdown-menu li:hover {
  background-color: #f0f0f0;
}

$(document).ready(function() {
  $('.btn').click(function() {
    $('.dropdown-menu').toggle();
  });
});