Как при появлении нового div'а плавно переместить уже имеющийся?

Есть отцентрированный блок с текстом и кнопкой. Кнопка появляется не сразу, а через некоторое время после загрузки страницы. Так как всё находится в центре, то текст "поднимается" рывком. Как сделать его плавное перемещение или зафиксировать в одном месте? Важно, чтобы страница адекватно отображалась на разных экранах.

<div class="container">
		<main class="text-center">
			<div>
				<h1>Текст</h1>
				<br/>
			</div>		
		
		<div class="buttontimervisible" id="vb">
		  
				<p><a href="javascript:void(0)" class="btn btn-md btn-light" onclick="showHide('block_id')">Контекст</a>
					<div class="text-center" id="block_id" style="display: none;">
					
					<br/>Контекст 1<br/>Контекст 2
					</div>
				</p>
		</div>
		
		</main>
		</div>

Расположение в центре:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

Появление кнопки:

$(window).ready(function(){
		setTimeout ("$('#vb').fadeIn('slow');",3000);
	});