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

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

  • 1.定位+margin
    说明:top: 0; left: 0; right: 0; bottom: 0; :这四个属性的设置使得元素在父容器中尝试同时相对于其四个边缘对齐。由于子元素的尺寸固定,这将导致元素无法同时触及所有边界,因此这种设置在没有其他定位信息时不会改变元素位置。
    margin: auto; :这是使元素居中的关键。当元素绝对定位且topbottomleftright都设置为0时,将margin设置为auto会使浏览器自动计算上下和左右的margin,以使元素居中。
css 复制代码
 *{
      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%) 操作的百分比是相对于元素自身的宽度和高度计算的。
css 复制代码
    .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; :垂直方向上居中对齐子元素。这会使子元素在父容器内垂直居中。
css 复制代码
    .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;,使内容在水平和垂直方向上居中。
css 复制代码
    .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>
相关推荐
Mintopia5 分钟前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
前端太佬10 分钟前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia11 分钟前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
xRainco16 分钟前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊17 分钟前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil19 分钟前
CSS专题之外边距重叠
前端·css
hepherd21 分钟前
Flask学习笔记 - 表单
前端·flask
求知呀22 分钟前
最直观的 Cursor 使用教程
前端·人工智能·llm
仙灵灵22 分钟前
前端的同学看过来,今天讲讲jwt登录
前端·后端·程序员
陈随易24 分钟前
VSCode v1.99发布,王者归来,Agent和MCP正式推出
前端·后端·程序员