🌈 在网页设计中，将一个`div`元素水平和垂直居中是非常常见的需求。今天就来聊聊如何使用CSS实现这一功能，并且探讨一下如何给居中的`div`添加圆角效果（`border-radius`）。以下是六种方法，让我们一起来看看吧！

👩‍💻 方法一：使用 `margin: auto;`

这是最简单的方法之一。只需要设置`margin`属性为`auto`，并指定宽度即可实现水平居中。垂直居中可以通过添加外边距或使用Flexbox来完成。

🔍 方法二：Flexbox布局

利用Flexbox的强大功能，可以轻松实现`div`的居中对齐。只需设置父容器的`display: flex; justify-content: center; align-items: center;`。

🛠️ 方法三：Grid布局

Grid布局同样强大，通过设置`display: grid; place-items: center;`，可以同时实现水平和垂直居中。

🔧 方法四：绝对定位

通过设置`position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);`，可以实现绝对定位的居中。

🎨 方法五：表格布局

使用`display: table; margin: 0 auto;`可以实现水平居中，而垂直居中则需要额外的技巧。

📐 方法六：伪元素

通过使用伪元素和绝对定位，可以实现一种较为复杂的居中方法。

🎨 添加`border-radius`：

一旦你完成了居中，想要给`div`添加圆角效果，只需使用`border-radius`属性即可。例如，`border-radius: 10px;` 将为你的`div`添加10像素的圆角。

希望这些方法能帮助你在项目中灵活运用，让页面更加美观！✨