这里给大家统计了一些CSS水平垂直居中的方法

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在日常页面布局的过程中，我们难免会遇到需要把盒子水平垂直居中的需求。那么一共有多少种CSS方案能够实现居中呢？

HTML结构如下

<div class="parent">
    <div class="child"></div>
</div>

1. 使用Flex布局

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

Flex布局是我日常使用过程中使用最频繁的一种方案，通过很简单的几行代码就可以实现我们想要的布局。具体学习的话可以阅读阮一峰的Flex布局教程。

2. 使用绝对定位

.parent {
    position: relative;
}
.child {
    position: absolute;
    /* top和left是以左上角为坐标原点 */
    top: 50%;
    left: 50%;
    /* transform：translate的属性值为百分数时，是以元素自身为参考 */
    transform: translate(-50%,-50%);
}

/* 或者 */
.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

值得说明的是，top和left是以左上角为坐标原点的，这样就会导致虽然设置为50%，但实际上是实现了左上角这个点的居中，因此需要再移动一下这个元素。而当transform的translate的属性值为百分数的时候，是以元素自身作为参考的，因此向左和向上移动自身长宽的50%即可实现水平垂直居中。

3. Flex的另一种方法

.parent {
    display: flex;
}
.child {
    margin: auto;
}

（虽然但是，这种我还没怎么用过哈哈哈...

4.Grid布局

.parent {
    display: grid;
}
.child {
    justify-self: center;
    align-self: center;
}

Grid布局也是比较常用的一种方法，一般用在构建整体布局的时候用到的比较多。它有固定和灵活的尺寸，还可以通过名称或网格线把目标放置在指定的位置。具体使用也可以阅读阮一峰的Grid布局教程。（阮一峰老师双鲨）

5.Table布局

.parent {
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

没怎么用过，感兴趣的可以尝试一下。

以上是我统计的一些关于水平垂直居中的方法，如有遗漏，欢迎大家补充哦~