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
限制：
- 元素
display: inline-block - 需要有一个兄弟元素作为参照物，并且会以最高的兄弟元素为作为参考，垂直于兄弟元素的中心点。所以可以利用伪元素。
.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);
}
阮一峰-网格布局
以上。