Question

我正在尝试复制此网站http://www.shouldigoout.com/的样式，其中有一些文本（h1 p a）在页面上垂直和水平集中排列。

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

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

网站似乎使用javascript / jquery来定位页面上的元素是实现这种效果的唯一方法吗？

Answer 1

示例使用的是javascript，但您可以使用flexbox执行此操作：

@media(min-width: 1000px){    
    .parent{
      display: flex;
      flex-flow: row wrap;
      align-items: center;
    }
}

Flexbox是最简单的方法，@ media允许您选择希望规则处于活动状态的窗口大小的间隔。在这种情况下，如果窗口宽于1000px，它将居中。

Answer 2

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：

＆＃13;

 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%);
}

＆＃13;

<h1>This is a test</h1>

＆＃13;

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

2 个答案: