html – CSS全屏幕div与文本在中间

前端之家收集整理的这篇文章主要介绍了html – CSS全屏幕div与文本在中间前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > How to center an element horizontally and vertically?10个答案我有一个css类定义,所以我可以使一个div使用所有浏览器的视口,规则如下:
.fullscreenDiv {
    background-color: #e8e8e8;
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

现在我想把div里面的文本放在屏幕的正中央,所以垂直对齐中心和水平对齐中间,但是我似乎找不到正确的方法

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

我已经尝试添加一个P元素里面的显示集到table-cell(一种常见的方式居中的文本)没有运气。

有什么建议么?

解决方法

标准方法是给予居中的元素固定尺寸,并将其绝对定位:
<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

猜你在找的HTML相关文章