让一个不定宽高的盒子水平垂直居中

最新推荐文章于 2023-12-28 14:01:48 发布

爱编程的梨清

最新推荐文章于 2023-12-28 14:01:48 发布

阅读量958

点赞数 1

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

本文链接：https://blog.csdn.net/nbsl_/article/details/123944627

版权

CSS 居中定位 Flex布局 transform

关键词由CSDN通过智能技术生成

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

让一个不定宽高的盒子水平垂直居中

一、使用定位的方式

    .father{
      position: relative;
      width: 500px;
      height: 300px;
      background-color: skyblue;
    }
    .son{
      width: 40px;
      height: 40px;
      background-color: orange;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    <div class="father">
    <div class="son"></div>
    </div>

二、使用flex布局的方式

    .father{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500px;
      height: 300px;
      background-color: skyblue;
    }
    .son{
      width: 40px;
      height: 40px;
      background-color: orange;
    }
    <div class="father">
    <div class="son"></div>
    </div>

三、使用Css3属性

    .father{
      position: relative;
      width: 500px;
      height: 300px;
      background-color: skyblue;
    }
    .son{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 40px;
      height: 40px;
      background-color: orange;
    }
    <div class="father">
    <div class="son"></div>
    </div>