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 article内的更多信息。

<小时/> 此外，如果您不需要支持旧版浏览器：弹性框使这件事变得轻而易举：

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

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

Answer 3

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

如果您想实现这一目标，您有两种解决方案：

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

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

Answer 4

text-align: center会将其水平居中，以便将其垂直放置在一个范围内并给它一个margin:auto 0;的css（你可能还需要给它一个display: block属性<） / p>

CSS全屏div，文本在中间

4 个答案: