让元素垂直居中的四种方法

最新推荐文章于 2024-06-03 18:53:48 发布

Gaga ❀

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量651

点赞数 15

文章标签： css css3 前端

本文链接：https://blog.csdn.net/Cwhat/article/details/136669956

版权

本文介绍了四种CSS技术让元素居中的方法：1）使用`margin:auto`；2）结合`position`和`transform`的百分比定位；3）利用Flexbox的`justify-content`和`align-items`；4）使用Grid布局的`place-items`。

摘要由CSDN通过智能技术生成

下面介绍四中让元素居中的方法：

1.定位+margin
说明：top: 0; left: 0; right: 0; bottom: 0; ：这四个属性的设置使得元素在父容器中尝试同时相对于其四个边缘对齐。由于子元素的尺寸固定，这将导致元素无法同时触及所有边界，因此这种设置在没有其他定位信息时不会改变元素位置。
margin: auto; ：这是使元素居中的关键。当元素绝对定位且top、bottom、left和right都设置为0时，将margin设置为auto会使浏览器自动计算上下和左右的margin，以使元素居中。

*{
      padding: 0;
      margin: 0;
    }
    .father{
      width: 400px;
      height: 400px;
      border: 1px solid;
      position: relative;
    }
    .son{
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: pink;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
   
 <div class="father">
    <div class="son"></div>
 </div>

2.定位+transform
说明： top: 50%; left: 50%; ：将元素的顶部和左侧边缘分别定位到其父容器的50%位置。这是相对于父容器的上边缘和左边缘的百分比定位。
transform: translate(-50%, -50%); ：通过使用 translate 转换，元素会向左和向上移动自身宽度和高度的一半，实现了水平和垂直方向上的居中效果。这是因为 translate(-50%, -50%) 操作的百分比是相对于元素自身的宽度和高度计算的。

  .father{
      width: 500px;
      height: 500px;
      border: 1px solid;
      position: relative;
    }
    .son{
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: pink;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    
   <div class="father">
    <div class="son"></div>
  </div>

3.flex布局
说明： display: flex; ：将父元素设置为 Flexbox 容器，使其内部子元素能够利用 Flexbox 布局。
justify-content: center; ：水平方向上居中对齐子元素。这会使子元素在父容器内水平居中。
align-items: center; ：垂直方向上居中对齐子元素。这会使子元素在父容器内垂直居中。

    .father{
      width: 500px;
      height: 500px;
      border: 1px solid;
      display: flex; 
      justify-content: center;
      align-items: center;
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    
   <div class="father">
    <div class="son"></div>
  </div>

4.grid布局
说明：display: grid; ：将容器设置为Grid布局。
place-items: center; ：这是一个快捷方式，相当于同时设置了 align-items: center; 和 justify-items: center;，使内容在水平和垂直方向上居中。

    .father{
      width: 500px;
      height: 500px;
      border: 1px solid;
      display: grid;
      place-items: center;
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    
    <div class="father">
        <div class="son"></div>
    </div>