css实现上下左右居中

css实现子盒子在父级盒子中上下左右居中

几种常用的上下左右居中方式

HTML代码部分
html 复制代码
<div class="box">
    <img src="./img/77.jpeg" alt="" class="img">
</div>
css部分
方式一

利用子绝父相和margin:auto实现

css 复制代码
<style>
    body{
      margin: 0;
    }
    .box{
      height: 100vh;
      background-color: hotpink;
      position: relative;
    }
    .img{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
</style>
方式二

利用子绝父相和css3的transform属性实现

css 复制代码
<style>
      body {
        margin: 0;
      }
      .box {
        height: 100vh;
        background-color: hotpink;
        position: relative;
      }
      .img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
</style>

首先把内部盒子的位置设置为顶部和左侧距离大盒子顶部和左侧都是大盒子高度和宽度的50%;然后再把小盒子的顶部和左侧的位置都回退内部小盒子高度和宽度的50%;这样就刚好实现小盒子上下左右都居中在大盒子内部

图示:第一步

第二步:

方式三

利用flex布局实现(弹性盒子)

css 复制代码
<style>
      body {
        margin: 0;
      }
      .box {
        height: 100vh;
        background-color: hotpink;
        /* 对box大盒子启用flex(弹性盒子)布局 */
        display: flex;
        /* 定义box中的项目(对于启用flex布局的元素(父元素,也称之为容器),其内部的子元素统一的称之为项目)在交叉轴(flex布局中的定义:垂直方向上的轴线,水平的轴线称之为主轴)上的对齐方式: 上下居中 */
        align-items: center;
        /* 定义项目在主轴上的对齐方式:左右居中;图片高度会撑满 */
        justify-content: center;
      }
</style>
方式四

利用grid布局实现(网格布局)

css 复制代码
<style>
      body {
        margin: 0;
      }
      .box {
        height: 100vh;
        background-color: hotpink;
        /*  在父元素上开启网格布局,采用网格布局的父元素被称之为容器(container),内部采用网格定位的子元素,称为"项目"(item)  */
        display: grid;
      }
      .img {
        display: inline-block;
        /* align-content属性是整个内容区域的垂直位置(上中下) */
        align-self: center;
        /* justify-content属性是整个内容区域在容器里面的水平位置 */
        justify-self: center;
      }
</style>
方式五

利用display: flex和margin: auto实现

css 复制代码
<style>
      body {
        margin: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        background-color: hotpink;
        display: flex;
      }
      .img {
        /*上下左右都居中*/
        margin: auto;
      }
    </style>
方式六

待更新...

相关推荐
aha-凯心9 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没26 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN26 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户990450177800940 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家43 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636022 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端