代码之家 › 专栏 › 技术社区 › JaneEyre

垂直对齐在第一页加载时不起作用

translate transform css html

JaneEyre · 技术社区 · 8 年前

我试图使用

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

然而,我注意到,在第一页加载时,它并没有很好地工作。div向上移动到页面顶部。刷新时,一切正常,div垂直居中。我能做些什么来解决这个问题?

2 回复 | 直到 8 年前

Sylwek 8 年前

display: flex;
align-items: center;

Alex 8 年前

我倾向于 absolutely 按位置放置元素 50% 然后使用 margin-top:-<half .element height> :

height:100px;
position: absolute;
top:50%;
margin-top:-50px;

推荐文章

geany_tab_title_color · 如何将4个div围绕一个中心div?

3 年前

Martin Fric · 使用变换时,Div容器仍保持原始图像大小的大小

7 年前

Niko · 边框css更改速度快于变换旋转

7 年前

Leon1988 · 标题中多行的斜边

7 年前

Levi · 如何使用jq将多个输出对象组合成单个对象

7 年前

Mose · SVG变换:根据X缩放Y

7 年前

spoilerd do · 统一变换。前进是不断变化的

7 年前

Paul · 悬停时变换比例不缩放

7 年前

listener · 在Python中创建音频文件的振幅与频谱图

7 年前

Pep · Matlab-Hough变换中的帧线

7 年前