在<div>屏幕的地平线和垂直中心放置一个元素？

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

使用-transform: translate

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>

Answer 2

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

Answer 3

这样尝试：演示

html, body {
    height: 100%;
}
body {
    display: table;
    margin: 0 auto;
}
div {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

Answer 4

试试这个小提琴。

div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 200px;
  height: 50px;
}

Answer 5

这应该会对您有所帮助
您需要使用transform:translate-css。

div {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

Fiddle here

Answer 6

开始吧。如果您不想使用translate，请将位置保持为相对位置，并将文本与中心对齐。

div {
position: relative;
text-align:center;
}

这是小提琴

Answer 7

试试这个：

 div {
      position: relative;
      text-align:center;
      top:50%;
    }

Answer 8

它简单而快速地尝试这个

div {
  margin: auto;
  width:50%;
}

在这里工作