flexbox内部的CSS文本操纵(效果)

Question

我正在使用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？

Answer 1

我做了一个小的添加 - 不是flexbox，而是解决问题。将文本以最接近的相对位置的父母（或在这种情况下为身体）中心。

您可以在此处看到Codepen演示。

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

Answer 2

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

body{
  display:flex;
  height:100vh;
}
.glitch{
  margin: auto;
}

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