css如何使盒子居中

CSS中有很多方法可以使盒子居中，下面我将介绍其中的几种方法。

/* 方法一：使用margin */.box{
    margin: 0 auto;
 /* 横向上居中，垂直方向没有设置，元素会在父级里向上堆叠 */}
/* 方法二：使用flex布局 */.container{
    display: flex;
    justify-content: center;
     /* 横向上居中 */align-items: center;
 /* 垂直方向上居中 */}
/* 方法三：使用position和margin */.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 /* 通过负的50%的位移进行居中的操作 */}
/* 方法四：使用grid布局 */.container{
    display: grid;
    place-items: center;
 /* 横向和垂直方向上居中 */}
/* 方法五：使用text-align和vertical-align */.container{
    width: 100%;
    height: 100%;
    text-align: center;
     /* 横向上居中 */vertical-align: middle;
 /* 垂直方向上居中 */}
.container .box{
    display: inline-block;
     /* 让元素变成行内块，才能使用vertical-align */vertical-align: middle;
 /* 垂直居中 */}
    

以上是常见的几种方法，选择适合自己的方法可以让页面更加美观。

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