CSS中垂直居中是常见需求,但却较为困难。这里我们先来看看如何将一个元素在一行内垂直居中。.parent { display: flex; align-items: center; } .child
CSS中垂直居中是常见需求,但却较为困难。这里我们先来看看如何将一个元素在一行内垂直居中。
.parent { display: flex; align-items: center; } .child { margin: auto; }
父元素设置了flex布局,并且使用了align-items: center来使其子元素垂直居中,同时子元素的margin设置了auto来水平居中。
如果元素需要在多行内垂直居中,也有多种方法。我们先来看看最简单的方式:
.parent { display: flex; flex-direction: column; justify-content: center; height: 100%; } .child { margin: auto; }
这里父元素使用了flex布局,将flex-direction设置为column来使子元素在垂直方向排列,然后使用了justify-content: center来使子元素在垂直方向居中。需要注意的是,父元素的高度必须是确定的。
如果需要支持IE9以下的浏览器,可以使用CSS3新增的transform属性来实现多行内垂直居中:
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
这里子元素使用了绝对定位,并且将top属性设置为50%来将其移动到父元素的中心,然后使用transform属性来将子元素往上移动50%的高度,使其垂直居中。
总结:实现元素的一行或多行垂直居中,可以使用flex布局的align-items和justify-content属性,或使用CSS3的transform属性。
粉丝
0
关注
0
收藏
0