Question

我有一个需要居中的div - 但是使用

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

导致div中的所有内容变得模糊。我知道这个问题在这里已被提出很多问题，但没有一个解决方案（4或5个帖子）对我有用。有没有当前的解决方案甚至是另一种正确对中div的方法吗？

Answer 1

您可以在父级上使用display: flex; align-items: center; justify-content: center;来居中子元素。

＆＃13;

div {
 background: black;
 color: white;
 width: 100px;
 height: 100px;
 display: flex;
 justify-content: center;
 align-items: center;
}

＆＃13;

<div>
  <span>centered</span>
</div>

＆＃13;

Answer 2

这是将元素置于中心的最佳方式之一，但它需要添加位置：绝对。

top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position:absolute;

然后将工作