html中盒子居中代码

在HTML中，要让盒子居中需要用到一些CSS的技巧。下面我们来看一下实现盒子居中的两种方式。

//第一种方式：使用margin.box{
      width: 200px;
      height: 200px;
      background-color: pink;
      position: absolute;
     //必须有定位属性  top: 50%;
     //顶部距离为50%  left: 50%;
     //左侧距离为50%  margin-left: -100px;
     //向左移动盒子的一半  margin-top: -100px;
 //向上移动盒子的一半}
//第二种方式：使用flex布局.container{
      display: flex;
      justify-content: center;
     //水平居中  align-items: center;
 //垂直居中}
.box{
      width: 200px;
      height: 200px;
      background-color: pink;
}
    

上面两种方式都可以实现盒子的居中，可以根据实际情况选择使用。第一种方式使用的是绝对定位，需要手动计算margin值，比较麻烦。而第二种方式使用的是flex布局，简单易懂，推荐使用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！