垂直对齐不适用于首页加载

Question

我尝试使用

垂直居中div

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

但是，我注意到在首页加载时，它并没有很好地运行。 div移动到页面顶部。刷新时，一切正常，div垂直居中。我该怎么做才能解决这个问题？

Answer 1

要垂直居中div的内容，您可以使用flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7

display: flex;
align-items: center;

Answer 2

我倾向于50%按margin-top:-<half .element height>定位元素，然后使用height:100px; position: absolute; top:50%; margin-top:-50px; ：

示例：

php-fpm: pool <mydomain.tld>

Check out this fiddle