用于居中和居中剩余空间的CSS

居中和居中剩余空间的CSS是一种用于在网页中实现元素居中对齐和利用剩余空间的技术。以下是完善且全面的答案：

居中对齐是指将元素在其父容器中水平和垂直居中显示。这在设计网页布局时非常常见，可以使页面看起来更加整洁和专业。

居中剩余空间是指当元素的宽度或高度小于其父容器的宽度或高度时，将剩余的空间平均分配给元素的左右或上下两侧，从而使元素在页面中居中显示。

以下是一些常用的CSS技术来实现居中和居中剩余空间：

水平居中：
- 使用text-align: center;将文本内容水平居中。
- 使用margin: 0 auto;将块级元素水平居中。
- 使用Flexbox布局，将父容器的display属性设置为flex，并使用justify-content: center;将子元素水平居中。

垂直居中：
- 使用line-height属性将行内元素的内容垂直居中。
- 使用Flexbox布局，将父容器的display属性设置为flex，并使用align-items: center;将子元素垂直居中。
- 使用绝对定位，将元素的top和bottom属性设置为相等的值，并将margin属性设置为auto。
居中剩余空间：
- 使用Flexbox布局，将父容器的display属性设置为flex，并使用justify-content: space-between;将子元素均匀分布在父容器中，利用剩余空间。
- 使用Grid布局，将父容器的display属性设置为grid，并使用grid-template-columns: 1fr 1fr;将子元素平均分配在父容器中的两列，利用剩余空间。