垂直对齐不适用于第一页加载
Vertical aligning doesn't work on first page load
我正在尝试使用
将 div 垂直居中
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
但是，我注意到在第一页加载时效果不佳。 div 向上移动到页面顶部。刷新时，一切正常，div 垂直居中。我该怎么做才能解决这个问题？
要使 div 的内容垂直居中，您可以使用 flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7
display: flex;
align-items: center;
我倾向于 absolutely 通过 50% 定位元素，然后使用 margin-top:-<half .element height>:
示例：
height:100px;
position: absolute;
top:50%;
margin-top:-50px;
我正在尝试使用
将 div 垂直居中.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
但是，我注意到在第一页加载时效果不佳。 div 向上移动到页面顶部。刷新时，一切正常，div 垂直居中。我该怎么做才能解决这个问题？
要使 div 的内容垂直居中，您可以使用 flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7
display: flex;
align-items: center;
我倾向于 absolutely 通过 50% 定位元素，然后使用 margin-top:-<half .element height>:
示例：
height:100px;
position: absolute;
top:50%;
margin-top:-50px;