一、利用css和js盒子模型实现盒子居中

  1. <style>
  2.     * {
  3.       padding: 0;
  4.       margin: 0;
  5.     }
  7.     html,
  8.     body {
  9.       height: 100%;
  10.       width: 100%;
  11.     }
  13.     #box {
  14.       width: 200px;
  15.       height: 200px;
  16.       padding: 20px;
  17.       border: 10px solid lightgreen;
  18.       font-size: 16px;
  19.       line-height: 30px;
  20.       /* margin:  100px auto; */
  21.       background: lightpink;
  22.     }
  24.     /* 方法一：
  25.     1.知道宽高的情况下把当前元素上下左右居中 */
  26.     /* #box {
  27.             position: absolute;
  28.             top:50%;
  29.             left:50%;
  30.             margin-left: -130px;
  31.             margin-top: -130px;
  32.         } */
  35.     /* 方法二:
  36.     2.基于CSS3变形属性中的位移，在不知道宽高的情况下也能实现效果  */
  37.     /* #box {
  38.             position: absolute;
  39.             top: 50%;
  40.             left: 50%;
  41.             transform: translate(-50%, -50%);
  42.         } */
  45.     /* 方法三：
  46.     3.在不知道宽高的情况下把四个方向的值全部设置为0也能实现居中  */
  47.     /* #box {
  48.             position: absolute;
  49.             top: 0;
  50.             left: 0;
  51.             bottom: 0;
  52.             right: 0;
  53.             margin: auto;
  54.         } */
  57.     /* 方法四：
  58.     4.设置元素在FLEX容器主轴和交叉轴方向上的对齐方式：CENTER居中对齐*/
  59.     /* body {
  60.       display: flex;
  61.       justify-content: center;  /!* 在主轴居中  *!/
  62.       align-items: center;  /!*  在交叉轴居中 *!/
  63.     } */
  64.   </style>

二、利用js实现元素居中

  1. <body>
  2. <div id="box">
  3.     的哈达四大说不定甲A爱打架爱神的箭阿萨德甲ADHAU盾甲ADJAda的DA的空间DJA货daD
  4. </div>
  5. <script>
  6. // 5.利用js实现元素居中：
  7. // 利用js设置盒子的left和top值
  8. // left==>屏幕宽度的一半 - 盒子宽度的一半 <==>(屏幕宽度- 盒子宽度)/2
  9. let winW = document.documentElement.clientWidth,
  10.     winH = document.documentElement.clientHeight,
  11.     box = document.getElementById('box');
  12. box.style.position = 'absolute';
  13. // box.style.left = (winW - 260) / 2 + 'px';
  14. // box.style.top = (winH - 260) / 2 + 'px'
  15. // box.style.left = (winW - box.offsetWidth) / 2 + 'px';
  16. // box.style.top = (winH - box.offsetHeight) / 2 + 'px';
  17. </script>