DIV居中(水平居中及垂直居中)实现代码✨

大家好！今天给大家分享一下如何使用CSS让一个DIV元素在页面上实现水平居中和垂直居中HorizontalAlignment and VerticalAlignment of a DIV Element in CSS✨。

首先，我们需要设置容器的宽度和高度，这可以通过设置`width`和`height`属性来完成。然后，我们使用`margin: auto;`让元素在水平方向上居中。为了实现垂直居中，我们可以使用Flexbox布局或者绝对定位结合transform属性。这里，我推荐使用Flexbox，因为它更简洁且兼容性更好。具体代码如下：

```css

.parent {

display: flex;

justify-content: center; / 水平居中 /

align-items: center;/ 垂直居中 /

width: 100%;

height: 100vh;

}

```

这样，无论你的屏幕大小如何，这个DIV都会保持居中状态。希望这个小技巧对你有帮助，快去试试吧！💪

如果你有任何问题或更好的方法，欢迎留言交流哦！💬

前端开发 CSS技巧 网页设计