🎯 div元素水平垂直居中的CSS代码 📐

在网页设计中，将一个div元素居中显示是一个常见的需求，无论是在水平方向还是垂直方向上。对于初学者来说，这可能是一个挑战，但通过使用CSS，我们可以轻松实现这一效果。下面，我们将一起探索如何让一个div元素在页面中既水平又垂直地居中显示。

首先，确保你的HTML结构如下：

```html

```

接着，在CSS文件中添加以下样式：

```css

.center-me {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

height: auto;

}

```

上述代码利用了绝对定位和`transform`属性来实现元素的居中。`top: 50%;` 和 `left: 50%;` 将元素的左上角定位到父容器的中心点。然后通过`transform: translate(-50%, -50%);` 向左和向上移动自身宽度和高度的一半，从而实现真正的居中效果。

现在，你可以尝试在自己的项目中应用这些代码，看看效果如何吧！✨