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

transform: translateY的帮助下我们可以使用三行CSS代码让任何,甚至不知道高度的元素垂直居中。

CSS的transform属性常用来旋转和缩放元素,现在我们可以使用它的translateY函数垂直对齐元素。垂直居中通常的做法是使用绝对定位或者设置行高,但是这两种方案的弊端是要么需要你知道元素的高度,要么智能作用与单行文本(译注:inline或者inline-block元素)。

我们的代码如下

.element { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

以上就是所有代码,它和据对定位的方案类似,但是不需要设定元素的高度,也不需要为其父元素设定position属性,它独立工作,甚至支持IE9

为了让它用起来更简单,我们可以在包含浏览器前缀之后写入一个混合里面(mixins):

@mixin vertical-align { 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 
.element p { 
    @include vertical-align; 
}

或者使用Sass的placeholder selector减少代码量。

%vertical-align { 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 
.element p { 
    @extend %vertical-align; 
}

Demo

———
翻译自:Vertical align anything with just 3 lines of CSS

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus