FlexBox 内的 CSS 文本操作（效果）答案

【问题标题】：CSS Text Manipulation (Effect) inside FlexBoxFlexBox 内的 CSS 文本操作（效果）
【发布时间】：2017-04-24 07:51:25
【问题描述】：

我正在使用 CSS 在单个页面上显示一些具有效果的文本。

不过，我现在也在尝试使用 flexbox 使其垂直对齐，但很难理解当文本效果使用绝对和相对定位时如何做到这一点。

当前水平对齐文本https://codepen.io/medoix/pen/WoyvMe

CSS

@import "compass/css3";

body{
  background:black;
  font-family: 'Varela', sans-serif;
}

.glitch{
  color:white;
  font-size:100px;
  position:relative;
  width:400px;
  margin:0 auto;
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:after{
  content:attr(data-text);
  position:absolute;
  left:2px;
  text-shadow:-1px 0 red;
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}

HTML

<link href='http://fonts.googleapis.com/cssfamily=Varela' rel='stylesheet' type='text/css'>

<div class="glitch" data-text="TEST">TEST</div>

是否可以在 flexbox 内垂直对齐同时仍获得相同的效果？

【问题讨论】：

您需要为此使用 flexbox，还是可以使用其他解决方案？

标签： css flexbox css-position

【解决方案1】：

我做了一个小补充——不是 flexbox，但可以解决问题。将文本居中在它最近的相对定位的父级（或者，在这种情况下，正文）中。

您可以查看 codepen 演示 here。

<div class="glitch-wrapper">
    <div class="glitch" data-text="TEST">TEST</div>
</div>

.glitch-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%)translateY(-50%);
}

【讨论】：

【解决方案2】：

使用 flex，最简单的是显示 + 边距和高度（如果需要）：

body{
  display:flex;
  height:100vh;
}

.glitch{
  margin: auto;
}

https://codepen.io/gc-nomade/pen/VmdqmL

【讨论】：

这样对齐正确但效果似乎受到影响且不正确。