css 盒子上下居中 |css父级元素是什么

.box{
width: 200px;
height: 200px;
background-color: #eee;
position: relative;
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

以上代码中，大家给盒子设置了相对定位，然后给内容绝对定位，再用top、left、transform属性让内容上下左右居中。

.box{
width: 200px;
height: 200px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}

以上代码中使用了flex布局，设置了盒子为flex容器，使用justify-content和align-items属性使内容水平垂直居中。

.box{
position: relative;
}
.content{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}

以上代码中同样使用了相对定位和绝对定位，大家给内容同时设置了top和bottom为0，表示上下拉伸到最大，为了让内容居中，使用margin属性将其水平居中。

以上是三种比较常见的CSS盒子上下居中方式，不同的应用场景可能需要使用不同的方法实现。