CSS全屏div,文本在中间

Question

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

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

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

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

我已经尝试添加P元素内侧display设置为table-cell没有运气(居中文本的常用方法).

有什么建议？

Answer 1

标准方法是给中心元素固定尺寸,并绝对放置:

<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; 
}?

• DEMO

Answer 2

接受的答案有效,但如果:

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

用这个:

.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;
}

关于CSS Tricks的flexbox的另一个很棒的指南; http://css-tricks.com/snippets/css/a-guide-to-flexbox/