FlexBox内のCSSテキスト操作（エフェクト）

Question

CSSを使用して、1ページにエフェクトを含むテキストを表示しています。

しかし、フレックスボックスを使用して垂直方向に整列させようとしていますが、テキストエフェクトが絶対位置と相対位置を使用しているときに、これがどのように行われるかを理解するのに苦労しています。

現在の水平方向の整列テキスト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> 

は、それが縦にも、同じ効果を取得しながら、フレキシボックスの内側に揃えることは可能ですか？

Answer 1

私はフレックスボックスではなく、少し追加しましたが、そのトリックはしています。相対的に近い位置にある親のテキストを中央に配置します（この場合は本文）。

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

Answer 2

必要に応じて、最も単純には、ディスプレイ+マージンと高さ：

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

.glitch{ 
    margin: auto; 
} 

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