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

发布时间：2020-12-14 21:47:13 所属栏目：资源来源：网络整理

导读：参见英文答案 How to center an element horizontally and vertically?10个答案我有一个css类定义，所以我可以使一个div使用所有浏览器的视口，规则如下： .fullscreenDiv { background-color: #e8e8e8; width: 100%; height: auto; bottom: 0px; top: 0px;

参见英文答案 > 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!