div水平垂直居中的四种方式

有四种常见的方式可以实现div水平垂直居中：

1. 使用Flexbox布局：将父元素的display属性设置为flex，然后使用justify-content和align-items属性将子元素水平和垂直居中。

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

2. 使用绝对定位和transform属性：将父元素相对定位（position: relative），然后将子元素绝对定位（position: absolute），并使用top、bottom、left和right属性将子元素居中。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3. 使用表格布局：将父元素的display属性设置为table，然后将子元素的display属性设置为table-cell，并使用vertical-align属性将子元素垂直居中。

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

4. 使用Grid布局：将父元素的display属性设置为grid，然后使用justify-items和align-items属性将子元素水平和垂直居中。

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

以上四种方式都可以实现div水平垂直居中，选择哪种方式取决于具体的布局需求和浏览器兼容性要求。