html - 覆盖居中/垂直对齐的消息

Question

我想在我的网站上制作一个覆盖层，以防止用户点击某处。有时它非常方便。在叠加层的中间，我想放置一条消息，例如“请稍候...”或“正在加载...”。

我制作了一个 div，它覆盖了整个屏幕及其内部的一个范围，其中包含消息。我设法将 span 水平居中于 div 内，但我在垂直对齐方面遇到了困难。消息也应该垂直居中。

这是迄今为止我的代码:

HTML:

<div id="overlay">
    <span>Please wait...</span>
</div>

CSS:

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

#overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
}

这是jsfiddle .

那么，如何获得消息垂直居中的跨度？

Answer 1

喜欢这个

<强> DEMO

在position:relative或top:50%;中添加下面的选择

CSS

#overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    position:relative;
    top:50%;
}