三行CSS代码让任何元素垂直居中

在transform: translateY的帮助下我们可以使用三行CSS代码让任何,甚至不知道高度的元素垂直居中。 CSS的transform属性常用来旋转和缩放元素,现在我们可以使用它的translateY函数垂直对齐元素。垂直居中通常的做法是使用绝对定位或者设置行高,但是这两种方案的弊端是要么需要你知道元素的高度,要么智能作用与单行文本(译注:inline或者inline-block元素)。 我们的代码如下 .element { position: relative; top: 50%; transform: translateY(-50%); } 以上就是所有代码,它和据对定位的方案类似,但是不需要设定元素的高度,也不需要为其父元素设定position属性,它独立工作,甚至支持IE9! 为了让它用起来更简单, »