css实现垂直居中的方法

css实现垂直居中的方法
CSS实现垂直居中有以下几种方法：

使用flexbox布局方法：

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

使用表格布局方法：

.container {
display: table;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
}

使用absolute定位和transform方法：

.container {
position: relative;
height: 100%;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

使用grid布局方法：

.container {
display: grid;
place-items: center;
}

使用line-height方法（仅适用于单行元素）：

.container {
height: 100%;
line-height: 100%;
}

使用pseudo元素和display:table方法：

.container {
display: table;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
}
.child::before {
content: “”;
display: inline-block;
vertical-align: middle;
height: 100%;
}

admin普通

收藏 海报 链接