如何设置CSS以便将绝对块垂直放置在中心[重复]

Question

此问题已经在这里有了答案：

How to vertically center a div for all browsers?（45个答案）

关闭55秒前。

我有一个搜索输入，我想在输入末尾有一个清除按钮。按钮是一个单独的元素，请告诉我如何正确使用CSS将此按钮垂直放置在中间。这是标记本身的示例

<form class="search">
    <input type="search" class="search-input">
    <button class="search-delete-button">
        x
    </button>
</form>

我有这个选项：

.search {
    position: relative;
}

.search-delete-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(-50%, -50%);
}

告诉我解决方案正确多少，或者有更好的选择？

Answer 1

我认为您需要使用margin-top：auto和margin-bottom：auto。

Answer 2

这可能会成功

.search {
  position: relative;
}
.search-delete-button {
  // Centers vertically 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  // Centers horizontally 
  margin: 0 auto;                
}