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水平垂直居中，选择哪种方式取决于具体的布局需求和浏览器兼容性要求。