CSS 顶部和底部填充 : split evenly within fixed-height border

Question

有人要求我将证书放在网上，然后用户可以打印出来。一切都很好，只是我无法将所有内容垂直居中。

我有一个包含边框的 div (#outerBorder) 和另一个嵌套在其中的包含所有内容的 div (#wrapper)。 #outerBorder 有一个固定的高度，这样证书在打印时会有一个很好的均匀边距。我希望 #wrapper 在其中垂直居中，以便在 #outerBorder 和 #wrapper 的顶部和底部之间均匀填充。

有没有一种方法可以在不手动计算然后对数字进行硬编码的情况下执行此操作？我找到的最接近的解决方案是这个:Evenly distribute images vertically within fixed-height space但我真的不想使用表格。

我也尝试过放置“vertical-align: middle;”在 #wrapper 的 CSS 中，但这似乎没有任何作用。

谢谢!-克里斯汀

Answer 1

CSS 中的中间对齐不必要地难以捉摸。

一个选项是将其添加到您的包装器中:

vertical-align:middle;    
display:table-cell;

这是一个JSFiddle例子