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

像这样

演示

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

CSS

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

Answer 2

除此之外，如果 Center 对象的height 和 width更大，你可以给负边距正好一半。

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