引导中心 div 垂直和水平

引导中心 div 是一种常用的 CSS 技术，可以将一个 div 水平和垂直居中。 在本文中，我们将介绍如何通过使用不同的 CSS 属性来实现此目标。

使用 Flexbox

使用 Flexbox 可以轻松地垂直和水平居中一个 div。将以下 CSS 样式添加到您的 div：

display: flex;
justify-content: center;
align-items: center;

这将使您的 div 与其容器水平对齐并垂直居中。

使用定位

通过使用定位，您可以将 div 定位在其容器的中心。使用以下 CSS 样式：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

注意，这将使 div 的位置相对于其最近的定位祖先元素而不是相对于整个文档。

使用 table 属性

使用表格属性也可以使 div 居中。将以下 CSS 样式添加到您的 div：

display: table;
margin: 0 auto;

table 属性会将 div 垂直和水平居中，并且 margin 属性将它水平居中。

总结

在本文中，我们介绍了三种方法，可以将一个 div 水平和垂直居中。使用 Flexbox 可以使实现变得简单，而使用定位和表格属性也可以快速实现。同时，我们也看到了这些技术的不同之处以及适合哪种情况下使用。