div水平垂直居中的方法

kang_k

已于 2022-09-05 17:44:37 修改

阅读量630

点赞数

分类专栏： css-div居中的文章标签：居中 div居中水平垂直居中 div居中的方法

于 2017-08-01 13:21:03 首次发布

本文链接：https://blog.csdn.net/kang_k/article/details/76522103

版权

css-div居中的专栏收录该内容

1 篇文章 0 订阅

订阅专栏

div水平垂直居中的方法

方法1：使用JS实现:兼容全部的浏览器

 <script type="text/javascript">
         //->获取当前屏幕的宽度和高度
         var winW = document.documentElement.clientWidth || document.body.clientWidth,
                 winH = document.documentElement.clientHeight || document.body.clientHeight;
         //->获取盒子的宽度和高度
         var box = document.getElementById("box"),
                 boxW = box.offsetWidth,
                 boxH = box.offsetHeight;
         box.style.position = "absolute";
         box.style.left = (winW - boxW) / 2 + "px";
         box.style.top = (winH - boxH) / 2 + "px";
     </script>

方法2 ：使用CSS实现:兼容全部的浏览器

 <style type="text/css">
         * {
             margin: 0;
             padding: 0;
         }

         .box {
             position: absolute;
             top: 50%;
             left: 50%;
             margin-top: -100px; /*--上边距等于负的高度的一半值--*/
             margin-left: -100px; /*--左边距等于负的宽度的一半值--*/

             width: 200px;
             height: 200px;
             border: 2px solid green;
         }
     </style>

上述的这种方式需要知道具体的宽度和高度，并计算出具体的margin值才可以实现，如果后期宽高值修改，我们的margin的值也需要修改

方法3：使用CSS实现:不兼容IE6~7(目前移动端项目的居中采用这种方法即可)

.box {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         margin: auto;
         width: 200px;
         height: 200px;
         border: 2px solid green;
     }

这样的操作不需要知道具体的宽度和高度,换句话说居中和宽度高度的值没有关系,以后宽高改变它会随着自己适应居中

方法4：空间居中布局，不管容器的大小，项目总是占据中心点。

<div class="parent" >
  <div class="child" contenteditable>:)</div>
</div>

.parent {
  display: grid;
  place-items: center;
  
  background: lightblue;
  width: 500px;
  height: 500px;
  
  resize: both;
  overflow: auto;
}

.child {
  // etc.
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid red;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}

body {
  font-family: system-ui, serif;
}
```![在这里插入图片描述](https://img-blog.csdnimg.cn/1c5fcf7566024a85a02c3153189be7af.jpeg#pic_center)