实现垂直水平居中的方法：CSS Flexbox和CSS Grid

在前端开发中，实现元素的垂直水平居中是一项常见的任务。本文将介绍两种常用的方法来实现这个效果：CSS Flexbox和CSS Grid。下面将详细介绍这两种方法的使用以及相应的源代码示例。

CSS Flexbox

CSS Flexbox是一种用于布局的弹性盒子模型，它提供了一种简单而强大的方式来实现元素的垂直水平居中。

要实现垂直水平居中，首先需要在父容器上应用Flexbox布局。可以通过设置display: flex来将容器转换为弹性盒子。

以下是一个示例代码，演示如何使用CSS Flexbox实现垂直水平居中：

.container {
   
  display: flex;
  justify-content: center;