如何实现盒子水平垂直居中

[Liqiuyue9597]

实现盒子水平垂直居中的方法有哪些

[Liqiuyue9597]

阿里巴巴淘系技术出品之网页布局
这个非常值得一看

[Liqiuyue9597]

//第一种
    #box1 {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      position: absolute;
      left: 50%;
      right: 50%
      transform: translateX(-50%) translateY(-50%);
    }
//第二种
    #box1 {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      margin: auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
//第三种flex:父元素设置
display:flex;
justify-content:center;
align-items:center;
//第四种grid。给父元素设置
dispaly: grid;
justify-items: center;
align-items: center;
//也可以将justify-items和align-items合并为place-items:center

[Maurice-crislin]

第一种不能实现效果，我猜博主应该粘贴漏了
#box1 { width: 200px; height: 200px; background-color: #ccc; position: absolute; left: 50%; right: 50%; top: 50%; botton: 50%; transform: translateX(-50%) translateY(-50%); }

[Liqiuyue9597]

第一种不能实现效果，我猜博主应该粘贴漏了 #box1 { width: 200px; height: 200px; background-color: #ccc; position: absolute; left: 50%; right: 50%; top: 50%; botton: 50%; transform: translateX(-50%) translateY(-50%); }

没有粘贴漏，这个需要父元素是相对定位，你可能没有添加