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;
}

效果

相关推荐
砖头拍死你31 分钟前
51单片机如何使用printf打印unsigned long的那些事
java·前端·51单片机
用户15129054522040 分钟前
css —pointer-events属性_css pointer-events
前端
帅夫帅夫41 分钟前
Axios 入门指南:从基础用法到实战技巧
前端
云边散步42 分钟前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥44 分钟前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
噔噔4281 小时前
使用webworker优化大文件生成hash的几种方式
前端
星眠1 小时前
学习低代码编辑器第四天
javascript·面试
Hilaku1 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
GISer_Jing1 小时前
Coze:字节跳动AI开发平台功能和架构解析
javascript·人工智能·架构·开源
NeverSettle1105741 小时前
手把手教你用nodejs + vue3 实现大文件上传、秒传、断点续传
前端·面试