html - 在屏幕的水平和垂直中心放置一个 元素？

Question

这是我的代码:

div {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  margin: 0;
  padding: 0;
}

<div>This sentence should be displayed in the center of the whole screen

</div>

我试过了 margin和 padding使 div 位于整个屏幕的中央。 (水平和垂直)。然而，margin也不padding可以使元素居中。

然后我试了left: 50%和 top:50% ，它改变了元素的位置，但不是预期的那样。 <div> 的左边距位于left:50% ，而我想要 <div> 的中心位于left:50% ..

有人对此有想法吗？

Answer 1

使用 - 转换:翻译

div {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    margin: 0;
    padding: 0;
    background: #ccc;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}

<div>This sentence should be displayed in the center of the whole screen</div>