竖向居中最简单的方法(三行CSS3代码)

也许是因为我们的文字都是从左到右写的,所以才导致HTML规范中所有跟布局相关的设计都是倾向于左右布局。所以才导致左右居中非常容易,而上下竖向居中经常会出错。在《如何竖向居中》这篇文章里曾介绍过两种竖向居中的方法,但每种方法都有自己的局限。于是技术是第一生产力的真理又一次发挥作用。如果你使用支持CSS3的现代浏览器(谷歌浏览器,火狐,Safari或IE11),只用三行CSS3代码,就会完美的让任何元素竖向居中。

我们使用的是CSS3中的transform: translateY属性。transform属性通常是用作旋转或放大缩小元素,但translateY功能却能够用来实现竖向居中。这里没有用到绝对定位,或设置行高。你无需知道父元素有多高。

CSS代码

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

这就是全部的代码。这种技术很类似绝对定位,但这里父元素无需设置高度或无需设置父元素的position属性。它能在所有情况下使用,甚至IE9

如果想兼容老式的浏览器,你需要在transform属性前添加浏览器引擎前缀。为了更加简化,我们可以把它写成一个mixin:

@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来减少CSS代码行数:

%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @extend %vertical-align;
}

一个小问题

有人指出,使用这种方法,元素在沿translateY移动时会损失“半个像素”,导致元素变得模糊。ok,对于这种问题,解决的方法是对其父元素使用preserve-3d属性。CSS代码如下:

.parent-element {
  -webkit-transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号