Html 带有居中/垂直对齐消息的覆盖

我想在我的网站上做一个覆盖，以防止用户点击某处。它有时很方便。在覆盖的中间，我想发出一个信息，比如“请等待……”或“加载……”。 我制作了一个

div

，它覆盖了整个屏幕，并在其中包含了一段信息。我设法使

span

在

div

内水平居中，但我正在努力使其垂直对齐。消息也应该垂直居中

以下是我目前的代码：

HTML:

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

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

这是你的电话号码

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

如下所示

在

位置添加以下选择：相对
或
顶部：50%

CSS

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

除此之外，如果中心对象在高度和宽度方面更大，则可以给出正好一半的负边距

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

#overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    height:100px;
    width:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    display:block;
}

我已经试过了
top:50%span
上的code>但忘记了
位置：相对。Doh！：-）非常感谢你的帮助！我知道，但我不能。您必须等待5分钟才能接受答案：-/理论上您是对的，但是
span
是一个内联元素。你不能在上面设置尺寸是的，我只是说“以防万一”有一个内部元素具有更大的高度和宽度-这就是解决方案，但你的代码将无法工作。你必须纠正它。您不能在span元素上设置
宽度
或
高度
。是的，只需添加“display:block”即可使“inline元素”看起来像“block level”元素