css盒子水平垂直居中

目录

1采用flex弹性布局:

2子绝父相+margin:负值:

3.子绝父相+margin:auto:

4子绝父相+transform:

5通过伪元素

6table布局

7grid弹性布局


文字 水平垂直居中链接:文字水平垂直居中-CSDN博客

以下为盒子水平垂直居中

复制代码
<template>
  <div>
    <div class="father">
      <div class="son"></div>
    </div>
  </div>
</template>

1采用flex弹性布局:

在父元素设置display: flex表示该容器内部的元素将按照flex进行布局,再设置align-items: center表示这些元素将相对于本容器水平居中,justify-content: center实现垂直居中。

javascript 复制代码
.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  background-color: aqua;
}

效果

2子绝父相+margin:负值:

设置left和top为50%,此时位置会偏右自身元素的宽高,再设margin-left和margin-top为自身元素宽高的负一半,实现水平垂直居中。

javascript 复制代码
.father {
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  position: relative;
}
.son {
  width: 200px;
  height: 100px;
  background-color: palegoldenrod;
  position: absolute;
  top: 50%;
  left: 50%;
  //宽度的一半
  margin-left: -100px;
  //高度的一半
  margin-top: -50px;
}

效果:

3.子绝父相+margin:auto:

,设置top、left、right、bottom为0,在设置margin:auto

javascript 复制代码
.father{
        width:400px;
        height:300px;
        background-color: rebeccapurple;
        position: relative;   //父级设置为相对定位
    }
    .son{
        width:100px;
        height:40px;
        background: red;
        position: absolute;   //设置为子级绝对定位
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }

效果

4子绝父相+transform:

设置left和top为50%,此时位置会偏右自身元素的宽高,再设transform: translateX(-50px) translateY(-50px);

javascript 复制代码
.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  position: relative;
}
.son{
  width: 200px;
  height: 100px;
  background-color: skyblue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-100px) translateY(-50px);
}

效果

5通过伪元素

javascript 复制代码
.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  text-align: center;
}
.father::before{
  content : '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.son{
  width: 200px;
  height: 100px;
  background-color: pink;
  vertical-align: middle;
  margin: 0 auto;
  display: inline-block;
}

效果

6table布局

设置父元素为display:table-cell,子元素设置 display: inline-block。利用verticaltext-align可以让所有的行内块级元素水平垂直居中。

javascript 复制代码
.father {
  display: table-cell;
  width: 400px;
  height: 300px;
  background: rebeccapurple;
  vertical-align: middle;
  text-align: center;
}
.son {
  display: inline-block;
  width: 200px;
  height: 100px;
  background: forestgreen;
}

效果

7grid弹性布局

在父元素设置display: drid表示该容器内部的元素将按照flex进行布局,再设置align-items: center表示这些元素将相对于本容器水平居中,justify-content: center实现垂直居中。

javascript 复制代码
.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  display: grid;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  background-color: greenyellow;
}

效果

相关推荐
Mintopia2 分钟前
🧩 未成年人保护视角:WebAIGC内容的分级过滤技术
前端·javascript·aigc
Mintopia9 分钟前
🌌 Three.js 几何变化动画配合噪声粒子教程:让你的代码也会“呼吸”
前端·javascript·three.js
kkkkk02110615 分钟前
JavaScript性能优化实战:深度剖析瓶颈与高效解决方案
开发语言·javascript·性能优化
亿元程序员17 分钟前
每次游戏卡的时候,策划总问:是不是DrawCall太高了?
前端
小羊不会c++吗(黑客小羊)18 分钟前
HTML教程——1,css
css·html
golang学习记21 分钟前
刚刚,OpenAI首个AI浏览器发布!颠覆Chrome,彻底改变你上网的方式|附实测
前端
吃饺子不吃馅27 分钟前
项目上localStorage太杂乱,逼我写了一个可视化浏览器插件
前端·javascript·chrome
golang学习记29 分钟前
从0 死磕全栈之Next.js 环境变量实战指南:企业级多环境(dev/test/prod)配置最佳实践
前端
.生产的驴1 小时前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
IT_陈寒1 小时前
Redis性能优化的7个隐藏技巧:从慢查询到亿级QPS的实战经验分享
前端·人工智能·后端