CSS 垂直水平居中总结(全)

目录

以下面的代码为例

html 复制代码
<div class="container">
  <div class="item"></div>
</div>

1,不需要知道元素的宽高

1.1,flex(2种)

最常用的,没有任何限制。

css 复制代码
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

css 复制代码
.container{
  display: flex;
}
.item {
  margin: auto;
}

1.2,grid(2种)

css 复制代码
.container {
  display: grid;
  align-content: center;
  justify-content: center;
}
css 复制代码
.container{
  display: grid;
}
.item {
  margin: auto;
}

1.3,verticle-align:middle

限制:

  1. 元素 display: inline-block
  2. 需要有一个兄弟元素作为参照物,并且会以最高的兄弟元素为作为参考,垂直于兄弟元素的中心点。所以可以利用伪元素。
css 复制代码
.container {
  text-align: center;
}
.container::before {
  content : '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  vertical-align: middle;
}

1.4,绝对定位

css 复制代码
.container {
   position: relative;
}
.item {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   margin: auto;
}

上下左右为 0 可以替换为 inset: 0,不过注意可能会有兼容性问题,参考

1.5,table-cell

限制:元素 display: inline-block

css 复制代码
.container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
}

2,需要知道元素的宽高

2.1,绝对定位

css 复制代码
.container {
   position: relative;
}
.item {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -50px 0 0 -50px;
   /* 或 */
   transform: translateX(-50px) translateY(-50px);
}

阮一峰-网格布局

以上。

相关推荐
AverageJoe199120 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平22 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown24 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易28 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma7732 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在32 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang36 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻37 分钟前
前端面试十一之TS
前端
摆烂为不摆烂37 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead1 小时前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试