Html css设置加载消息的样式

我正在使用ajax加载一些内容。我对此没有问题，我只是想知道如何在屏幕中央设置“loading…”消息的样式，或者最好使用loader图像。当内容加载时，“加载”消息出现在左上角（将整个页面保留为黑色），看起来不太好看。。我想知道这是否可能

  $.ajax({
   type: "POST",
   url: "page1.php", 
   beforeSend: function () {
  $("#content").html('loading...');
    },
   data: "Id="+Id,
   success: function(msg){
     $("#content").html(msg);
   }
   });

其中

#content

是页眉（右侧）下方“我的页面”的包装div，包含导航菜单的页眉样式为左浮动，垂直对齐，宽度为250px。模板为1200 X 700。。我试图用一个

#loader

div来包装

#content

，但它不起作用。。任何建议都将不胜感激。

---

谢谢

我会在执行请求时向“加载”添加一个id，并让css处理它：

  $.ajax({
   type: "POST",
   url: "page1.php", 
   beforeSend: function () {
    $("#loading").addClass("activated");
    },
   data: "Id="+Id,
   success: function(msg){
     $("#loading").removeClass("activated");
     $("#content").html(msg);
   }
   });

要使用css将元素居中，请执行以下操作：