css中box怎么居中排列

CSS中的box可以通过不同的属性来居中排列。常用的属性包括margin，position和transform等，下面我们逐一介绍。
1. margin居中
利用margin属性来居中一个块状元素，可以设置左右和上下两个方向的margin值为auto，实现块状元素在水平和垂直方向的居中排列。如下代码所示：

p {
    width: 200px;
    height: 200px;
    margin: auto;
} 

在上述代码中，我们将p元素的宽度和高度都设置为200px，然后将margin属性设置为auto。这样就可以实现p元素在水平和垂直方向的居中排列了。
2. position居中
另一种常见的居中方式是利用position属性来进行定位。可以通过将父元素设置为相对定位，然后将子元素设置为绝对定位，并将left和top属性设置为50%来实现块状元素在水平和垂直方向的居中排列。如下所示：

div {
    position: relative;
}
<br>
p {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} 

在上述代码中，我们将div元素设置为相对定位，然后将p元素设置为绝对定位。接着，将left和top属性都设置为50%。最后，利用transform属性将p元素向左和向上移动50%的距离，实现p元素在水平和垂直方向的居中排列。
3. translate居中
transform属性可以用来移动、旋转和缩放元素。其中，translate()函数可以实现块状元素在水平和垂直方向的居中排列。如下所示：

p {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} 

在上述代码中，我们将p元素设置为绝对定位，然后将left和top属性都设置为50%，最后利用transform属性将p元素向左和向上移动50%的距离，实现p元素在水平和垂直方向的居中排列。
综上所述，通过margin、position和transform等属性，可以实现块状元素在水平和垂直方向的居中排列。在实际应用中，不同的场景和需求会选择不同的居中方式，需要根据实际情况来进行选择。