Question

我正在尝试在用户点击按钮时显示提醒，但无法弄清楚如何水平居中提醒。我希望警报留在#main中。见this fiddle.

谢谢！

Answer 1

确保#main的position不是static，然后将以下规则分配给警报：

position: absolute;
left: 50%;
top: 50%;
margin-left: -width;
margin-top: -height;

将width和height替换为正确的值。

Answer 2

由于@Darkwater提出的css解决方案是正确的，前段时间我为jQuery创建了这个插件，它仍然使用CSS，因此它可以在多个对象上快速重用。

为jQuery创建一个名为 center 的新方法：

$.fn.center = function() {
    this.css("position","absolute").css("z-index","5000")
    .css("top","50%").css("left","50%")
    .css("margin",(-(this.height()/2))+"px 0 0 "+(-(this.width()/2))+"px"); 
    return this;
};

然后在div#message：

之后将其绑定到您的对象（在这种情况下为您的提醒.show()）

$("#message").show().center();

div将垂直和水平居中。

编辑：记得在方法center()之后绑定方法show()或类似方法使元素可见到DOM，因为据我所知，jQuery无法处理适当隐藏的元素。

Answer 3

您的标记和CSS定位实际上是错误的，而不是position: fixed; position: relative;使用#main position: absolute;而#message div使用#main div在div

中{1}}

关于计算部分，当您想要top: value (-)minus height居中时，您需要div的{{1}}将其垂直居中......

My Fiddle

Answer 4

#message{
  display: none;
  position: relative;
  top: 50%;
  text-align: center;
}

如何水平居中此警报？

4 个答案: