div居中显示

div水平和垂直居中显示，可以使用 CSS 的布局和定位属性。以下是几种常用的方法：

1、使用 Flexbox（弹性盒子布局）：

.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

在上面的示例中，将包含 <div> 元素的容器的 display 属性设置为 flex，然后使用 justify-content 和 align-items 属性来将元素水平和垂直居中。

2、使用 Grid（网格布局）：

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

在这个示例中，将容器的 display 属性设置为 grid，然后使用 place-items 属性将元素居中对齐。

3、使用绝对定位和负边距：

.container {
position: relative;
}
.centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在这个方法中，将容器的 position 属性设置为 relative，然后在要居中的 <div> 元素上应用绝对定位，并使用 top: 50% 和 left: 50% 将元素的左上角放置在容器的中心。然后，使用 transform: translate(-50%, -50%) 将元素向左和向上移动自身宽度和高度的一半，以实现居中效果。

这些是几种常用的方法，你可以根据具体的布局需求选择适合的方法来实现 <div> 元素的居中显示。