CSS设置小盒子在大盒子内居中

champion孺

于 2023-08-22 15:44:22 发布

阅读量410

点赞数 1

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_72583325/article/details/132429171

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题：一个大盒子中有个小盒子，如何让小盒子在大盒子中垂直居中，水平居中？

主要有两种实现方法：

1.绝对定位方法

.father-div{
    position: relative;
}
.son-div{
    /*左右居中*/
    left: 50%;
    transform: translateX(-50%);
    /*上下居中*/
    top: 50%;
    transform: translateY(-50%);
}

2.弹性盒子模型

.div{
    /*设置为弹性布局*/
    display: flex;
    /*设置主轴的方向，row,column*/
    flex-direction: row;
    /*项目在主轴上的对其方式*/
    justify-content: center;
    /*项目在交叉轴上对齐方式*/
    align-items: center;
}