HTML5中div元素居中技巧大揭秘，告别布局烦恼，轻松实现水平垂直居中！

在HTML5中，实现div元素的水平和垂直居中是一个常见的布局需求。以下是一些实用的技巧，可以帮助你轻松实现这一目标。
1. 使用Flexbox布局
Flexbox（弹性盒子布局）是CSS3中提供的一种用于布局的强大工具，它可以非常方便地实现元素的居中。
1.1 基本示例

在这个例子中，
.container
是一个flex容器，而
.centered-div
是需要居中的元素。
justify-content: center;
和
align-items: center;
分别用于在水平和垂直方向上居中元素。
1.2 高度自适应
如果你希望容器的高度自适应内容，可以使用
flex-direction: column;
来改变flex容器的方向，并设置
align-items: center;
。

2. 使用Grid布局
CSS Grid布局是另一个用于页面布局的强大工具，它提供了更灵活的布局方式。
2.1 基本示例

在这个例子中，
.container
是一个grid容器，而
.centered-div
是需要居中的元素。
place-items: center;
用于在水平和垂直方向上居中元素。
3. 使用绝对定位和transform
如果你不想使用Flexbox或Grid，可以使用绝对定位结合CSS的
transform
属性来实现居中。
3.1 基本示例

在这个例子中，
.centered-div
被定位在容器的中心，然后使用
transform: translate(-50%, -50%);
来将元素的中心点移动到容器的中心。
4. 使用表格单元格
虽然不推荐使用，但可以使用表格单元格（