从父元素入手

如果我们有这样一段代码：

代码的执行效果大家也很容易知道，现在我们就来让这个文字在垂直和水平方向实现居中：

在classcontainer中添加如下代码：

display: flex;

align-items:center;//让子元素垂直居中

justify-content:center;//让子元素水平居中

这时我们发现，文字已经在水平方向和垂直方向居中了。

在实际开发中，经常会遇到这样的需求，类似于图片和文字处于同一行，而图片的高度大于文字，需要使文字看起来在图片的中间部位，如下图：

然而使用flex方式实现这种布局，也很简单：

只需要在<span>元素前面添加相应的<img>元素就可以了。

注意想要垂直居中元素，其父元素一定是要有高度的。

从子元素入手

还是之前的代码，这次我们只需要在class等于container中添加一个属性display：flex即可，之后还是以该元素内的span为例，在span元素上添加如下代码：

width: 300px;//设置元素宽度
align-self:center;//让元素垂直居中
margin:0 auto;//让元素水平居中

也实现了相同的效果。
justify-content属性还有如下这么多的属性，可以尝试一下：

flex-start/flex-end/center/space-between/space-around。

同样，用在子元素上的align-self也有如下的值:

flex-start/flex-end/center/flex-auto(填满)/baseline/stretch(填满)。