CSS 垂直水平居中总结（全）

目录

• 1，不需要知道元素的宽高
• • 1.1，flex（2种）
  • 1.2，grid（2种）
  • 1.3，verticle-align:middle
  • 1.4，绝对定位
  • 1.5，table-cell
• 2，需要知道元素的宽高
• • 2.1，绝对定位

以下面的代码为例

<div class="container">
  <div class="item"></div>
</div>

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

1.1，flex（2种）

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

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

或

.container{
  display: flex;
}
.item {
  margin: auto;
}

1.2，grid（2种）

.container {
  display: grid;
  align-content: center;
  justify-content: center;
}

.container{
  display: grid;
}
.item {
  margin: auto;
}

1.3，verticle-align:middle

限制：

1. 元素 display: inline-block
2. 需要有一个兄弟元素作为参照物，并且会以最高的兄弟元素为作为参考，垂直于兄弟元素的中心点。所以可以利用伪元素。

.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，绝对定位

.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

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

2，需要知道元素的宽高

2.1，绝对定位

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

---

阮一峰-网格布局

以上。