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

Answer 2

此外，如果Center对象在 height＆amp;中更大宽度，你可以给出负边距正好一半。

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

覆盖中心/垂直对齐的消息

2 个答案: