CSS全屏div，中间带有文本 [英] CSS full screen div with text in the middle

问题描述

我定义了一个CSS类，因此可以使div使用所有浏览器的视口，规则如下:

I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:

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

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

Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.

它只需要在基于Webkit的浏览器上工作即可.

It only needs to work on webkit based browsers.

我已经尝试在内部添加一个P元素，并且将display设置为table-cell(一种居中放置文本的常用方式)，而没有运气.

I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.

有什么建议吗?

推荐答案

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

The standard approach is to give the centered element fixed dimensions, and place it absolutely:

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

• 演示

这篇关于CSS全屏div，中间带有文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！