css - 如何使用@media 规则垂直对齐内容以响应？

Question

我正在尝试复制本站的风格http://www.shouldigoout.com/其中有一些文本 ( h1 p a ) 在页面上垂直和水平居中对齐。

该页面使用@media 规则来调整不同显示尺寸的大小。

如何使用 css 简单地实现这种效果？

网站好像是用javascript/jquery来定位页面上的元素，只有这样才能达到这个效果吗？

Answer 1

CodePen example

如果您使用的是 SASS(和 Bourbon)，您可以这样做:

@mixin center($xy:xy) {
  @if $xy == xy {
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    @include transform(translateX(-50%) translateY(-50%));
  }
  @else if $xy == x {
    left: 50%;
    right: auto;
    @include transform(translateX(-50%));
  }
  @else if $xy == y {
    top: 50%;
    bottom: auto;
    @include transform(translateY(-50%));
  }
}

h1 {
  position: absolute;
  display: block;
  @include center;
}

编译的 CSS + HTML:

 h1 {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

<h1>This is a test</h1>