区块上下左右居中布局

最新推荐文章于 2024-02-16 09:39:04 发布

原创最新推荐文章于 2024-02-16 09:39:04 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了一种利用jQuery库与CSS样式实现页面元素精确居中的方法。通过绝对定位和自动边距属性，使得红色方块能够在浏览器窗口中始终保持居中显示，无论窗口大小如何变化。

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

   <style>
      #box{
         width: 100%;
         height: 100%;
      }
      #mar{
         width: 300px;
         height: 300px;
         background-color: red;
         position: absolute;
         left: 0;
         right: 0;
         top:0;
         bottom: 0;
         margin: auto;
      }
   </style>
</head>
<body>
   <div id="box">
      <div id="mar"></div>
   </div>
</body>
</html>