从父元素入手
如果我们有这样一段代码:
代码的执行效果大家也很容易知道,现在我们就来让这个文字在垂直和水平方向实现居中:
在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(填满)。