Question

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

我尝试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

请尝试以下操作： Demo

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

Answer 4

试试这个fiddle。

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

你走了。如果您不想使用翻译，请将位置保持为相对位置并将其文本对齐到中心位置。

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

这是fiddle

Answer 7

试试这个：

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

Answer 8

简单而敏感的尝试这个

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

Working Fiddle Here

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

8 个答案: