如何知道绝对定位垂直居中需要多少个像素？

Question

我正在看W3Schools中的幻灯片示例：

我的问题仅涉及margin-top: -22px;和.prev样式的.next（第31行）。他们怎么知道选择该数字以使按钮在垂直方向上准确居中？例如，他们怎么知道不做类似-20px或-25px等的事情。

这是JSFiddle：http://jsfiddle.net/wo73jn8z/

Answer 1

margin:0;
top:50%;
transform:translateY(-50%);

输入此属性将使您的按钮居中，无需计算像素，它将自动计算

Answer 2

您无需知道垂直中心设置多少像素，因为您可以使用百分比值自动设置。

删除margin-top: -22px;

然后添加transform: translateY(-50%); //it is use with top: 50%;

我已经在您的JSFiddle中尝试过，并且工作正常。

备注： 您可以编辑％，如果它不是居中的话，在这种情况下，我使用-40％，它将像W3Schools中的示例一样显示。

这是答案的来源： https://css-tricks.com/centering-css-complete-guide/