Question

我正在尝试使用CSS创建工具提示。想法是使工具提示垂直和水平居中于其父元素的中心，但在移动并悬停显示之前将其隐藏。无论如何，以下是我的代码：

await context.SaveChangesAsync()

.tooltip-top {
    position: relative;
}
.tooltip-top::before {
    content: attr(title);
    padding: 1rem 1.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    position: absolute;
    width: 60px;
}

如您所见，工具提示未根据其父元素居中。我在其中添加了样式<a href="#" class="tooltip-top" title="content">Tooltip</a>和left: 50%，但是样式仍然没有完全居中。我怎样才能做到这一点？

Answer 1

我在其中添加了左：50％和上：50％的样式，但是仍然没有完美地居中

除了这些属性外，添加属性transform: translate(-50%, -50%);

结果

.tooltip-top {
  position: relative;
}

.tooltip-top::before {
  content: attr(title);
  padding: 1rem 1.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: absolute;
  width: 60px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<a href="#" class="tooltip-top" title="content">Tooltip</a>

Answer 2

您在这里：

.tooltip-top {
    position: relative;
}
.tooltip-top::before {
    content: attr(title);
    padding: 1rem 1.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;

    width: 60px;
}

<a href="#" class="tooltip-top" title="content">Tooltip</a>

Answer 3

这就是您想要的吗？

.tooltip-top {
    position: relative;
}
.tooltip-top::before {
    content: attr(title);
    padding: 1rem 1.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    width: 60px;
}

<a href="#" class="tooltip-top" title="content">Tooltip</a>

如何将绝对元素相对于其父元素水平和垂直居中？

3 个答案:

结果