子盒子水平垂直居中的几种方式

最新推荐文章于 2023-04-17 19:24:13 发布

qq_52449203

最新推荐文章于 2023-04-17 19:24:13 发布

阅读量85

点赞数

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

本文链接：https://blog.csdn.net/qq_52449203/article/details/125689097

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

子盒子水平垂直居中的几种方式。

所有的结构都是，父盒子套一个子盒子。

 <div class="father">
    <div class="son"></div>
  </div>

第一种（定位）

不推荐使用，有点麻烦。

<style>
  .father {
    width: 400px;
    height: 400px;
    background-color: lightgreen;
    position: relative;
  }
  .son {
    width: 200px;
    height: 200px;
    background-color: purple;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
  }
</style>

第二种（定位）

四个0，再加 margin: auto

<style>
  .father {
    width: 400px;
    height: 400px;
    background-color: lightgreen;
    position: relative;
  }
  .son {
    width: 200px;
    height: 200px;
    background-color: purple;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
</style>

第三种（定位）

利用translate 实现盒子在x轴和y轴各移动-50%，来实现子盒子水平垂直居中

<style>
  .father {
    width: 400px;
    height: 400px;
    background-color: lightgreen;
    position: relative;
  }
  .son {
    width: 200px;
    height: 200px;
    background-color: purple;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

第四种（Flex布局）

Flex 布局(弹性布局) 全称：Flexible Box

注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效

推荐使用，这种实现子盒子水平垂直居中，非常简便，只需要给父盒子三行代码即可实现，但需要考虑兼容性。

 <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
 
      display: flex;
      /*`沿主轴居中排列 */
      justify-content: center;
      /*沿侧轴居中排列*/
      align-items: center;
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>