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

阮一峰-网格布局

以上。

相关推荐
汉得数字平台7 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹14 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互