42

我定义了一个 css 类，所以我可以制作一个 div 来使用所有浏览器的视口，规则如下：

.fullscreenDiv {
    background-color: #e8e8e8;
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

现在我希望 div 内的文本位于屏幕的确切中心，因此垂直对齐中心和水平对齐中间，但我似乎找不到正确的方法。

它只需要在基于 webkit 的浏览器上工作。

我已经尝试在其中添加一个 P 元素并display设置为table-cell（一种使文本居中的常用方法），但没有运气。

有什么建议么？

4

4 回答 4

74

接受的答案有效，但如果：

  • 你不知道内容的尺寸
  • 内容是动态的
  • 你想成为未来的证明

用这个：

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

这篇出色的 CSS-Tricks 文章中有关居中内容的更多信息。

此外，如果您不需要支持旧浏览器：一个 flex-box 让这变得轻而易举：

.center{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2014-12-23T04:41:03.480 回答
55

标准方法是给居中元素固定尺寸，并将其绝对放置：

<div class='fullscreenDiv'>
    <div class="center">Hello World</div>
</div>​

.center {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* margin is -0.5 * dimension */
    margin-top: -25px; 
}​
于 2012-05-22T17:53:11.677 回答
3

这个经典问题没有纯 CSS 解决方案。

如果你想实现这一点，你有两个解决方案：

  • 使用表格（丑陋，非语义，但垂直对齐非单行文本的唯一方法）
  • 监听 window.resize 和绝对定位

编辑：当我说没有解决方案时，我假设您事先不知道要居中的块的大小。如果你知道的话，佩斯利的解决方案非常好

于 2012-05-22T17:54:16.460 回答
1

text-align: center将它水平居中，因为垂直将它放在一个跨度中并给它一个css margin:auto 0;（你可能还必须给跨度一个display: block属性）

于 2012-05-22T17:51:53.710 回答