html - 如何水平居中此警报？

Question

当用户单击按钮但无法弄清楚如何水平居中警报时，我试图显示警报。我希望警报保持在#main 内。看到这个小提琴。

谢谢！

Answer 1

确保 #main 具有positionother than 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()，因为据我所知，jQuery 无法正确处理隐藏的元素。

Answer 3

您的标记和 CSS 定位实际上是错误的，而不是使用position: fixed;use position: relative;for#main和position: absolute;for#message并将您的消息div移入#main div

而关于计算部分，当你想居中 a 时div，你必须放弃top: value (-)minus height将div其垂直居中..

我的小提琴

Answer 4

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