一、水平垂直居中基本概念
在网页设计中，水平垂直居中是非常常见的要求。在CSS2中，我们通常使用绝对定位和负边距来实现水平垂直居中，但这种方法实现起来比较麻烦。随着CSS3的出现，flex布局则成为了一种更加简单和易用的解决方案。下面我们来看一下flex布局的水平垂直居中基本概念。
在flex布局中，使用justify-content属性设置主轴对齐方式，使用align-items属性设置交叉轴对齐方式。当主轴方向为水平方向时，justify-content可以使子元素水平居中；当主轴方向为垂直方向时，align-items可以使子元素垂直居中。在使用flex布局时，我们只需要设置好父元素的display:flex属性，就可以轻松实现水平垂直居中。
二、水平居中
在flex布局中，实现水平居中非常简单，只需要设置父元素的justify-content:center属性即可。下面我们来看一下实现水平居中的代码示例：
.parent {
display:flex;
justify-content:center;
}
.child {
width:200px;
height:100px;
}
在上面的代码中，父元素设置为flex布局，通过justify-content:center实现子元素的水平居中。其中子元素设置了宽度和高度，可以看到子元素在父元素中水平居中了。
三、垂直居中
实现垂直居中相对于水平居中稍微麻烦一些。首先，我们需要设置父元素的高度。然后，通过align-items:center属性可以使子元素垂直居中。下面我们来看一下实现垂直居中的代码示例：
.parent {
display:flex;
height:300px;
align-items:center;
}
.child {
width:200px;
height:100px;
}
在上面的代码中，父元素设置了高度为300px，然后使用align-items:center实现子元素的垂直居中。同样，我们可以看到子元素在父元素中垂直居中了。
四、水平垂直居中
实现水平垂直居中和单独实现水平居中和垂直居中一样简单。只需要在父元素中同时设置justify-content:center和align-items:center属性即可。下面我们来看一下实现水平垂直居中的代码示例：
.parent {
display:flex;
height:300px;
justify-content:center;
align-items:center;
}
.child {
width:200px;
height:100px;
}
在上面的代码中，父元素中同时设置了justify-content:center和align-items:center属性，实现了子元素的水平垂直居中。同样，我们可以看到子元素在父元素中水平垂直居中了。
五、水平垂直分别居中
在一些布局中，我们可能需要实现子元素水平和垂直分别居中的效果。这个时候，我们需要设置父元素的宽度和高度，然后使用align-self和justify-self属性来控制子元素的对齐方式。下面我们来看一下实现水平垂直分别居中的代码示例：
.parent {
display:flex;
width:300px;
height:300px;
}
.child {
width:200px;
height:100px;
align-self:center;
justify-self:center;
}
在上面的代码中，父元素设置了宽度和高度，然后子元素使用align-self:center和justify-self:center实现水平垂直分别居中。同样，我们可以看到子元素在父元素中水平垂直分别居中了。
总结
Flex布局作为一种新的CSS布局方案，其简便性和易用性显然优于以前的布局方式。其中，水平垂直居中作为布局中最常用的方式之一，越来越多地被使用。无论是水平居中、垂直居中还是同时水平垂直居中，都可以使用Flex布局来实现。同时，水平垂直分别居中同样也可以使用Flex布局来实现。掌握了Flex布局的水平垂直居中方法，我们就可以更好地运用这种布局方式来实现我们的网页设计。