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>
方式六

待更新...

相关推荐
摸鱼仙人~16 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子3 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码4 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html