Question

我想将预加载器与类preloader-align对齐到tab-containts的中心，但问题是当我left: 50%没有任何反应时。将百分比增加到500%后发生了变化但是它没有使其响应。

以下是代码：

.preloader-align{
  position:absolute;
  top: 50%;
  left: 50% ;
  width: 100px;
  height: 100px;

}
.tab-containts{
  min-height: 500px;
  position: absolute;
}

Answer 1

.tab-containts需要宽度，否则孩子不知道left:50%的含义。

编辑：为了使其真正居中，您需要考虑预加载器本身的宽度。

.preloader-align {
  position: absolute;
  top: 50%;
  //left: 50%;
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
}
.tab-containts {
  width: 100%;
  min-height: 500px;
  position: absolute;
}

Codepen

Answer 2

将[::-1] .tab-containts设置为width，然后微调器或加载程序自动与父div的中心对齐。目前，它在父div的中心对齐，它没有分配宽度，这就是为什么100%属性不起作用，所以如果你添加宽度那么它就可以工作。

left

选中此Jsfiddle

Answer 3

同时添加到.preloader-align以下样式：

margin-left: -50px;
margin-top: -50px;

或使用：

transform: translate(-50%, -50%);

完美居中。

将预加载器对齐到中心

3 个答案: