divにテキストを追加するとテキストが上に移動する

Question

私はdivにテキストを追加しようとしていますが、テキストを追加するたびにテキストの一部が画面外に移動します。これを修正するためにdivにテキストを追加するたびに余白を調整する必要があります。余白を調整し続ける必要がないように、テキストを追加するときにのみテキストを下に拡大する方法はありますか？ありがとう。

https://jsfiddle.net/2ey21qj5/4/

div.test { 
    margin-top:0cm; 
    text-align:center; 
    position: absolute; 
    left:50%; 
    transform:translate(-50%,-50%); 
    background: grey; 
    top: 5cm; 
} 

Answer 1

だけtransform: translate(-50%,-50%);を削除し、あなたが望むようにテキストを配置します。または、0引数：transform: translate(0,0);