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

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

  • 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>
相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿7 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法