Wyśrodkowany div w poziomie - position absolute

Question

Witam!

Oto HTML:

		if(isset($_SESSION['zalogowany']))
		{
		
		if (!isset($_COOKIE['alert']))
		{


	
		<div id="info">

	
		echo "Witaj użytkowniku "."<a href='forum-silent-hill-history-konto' class='login19'>".$_SESSION["login"]."</a></span>!"."<br>";
		echo "Teraz możesz w pełni korzytać z Forum SHH!"."<br>";
		echo "Pozdrawiam serdecznie Administrator Serwisu!"."<br>";
		echo '<div style="margin-top:15px;"><button  id="close" onclick="myFunction()">Zamknij</button></div>';


		</div>

		<script>

		function myFunction() {
			document.getElementById("info").style.display = "none";
		}
		</script>	

		setcookie('alert','1',time()+3600);
		
		}
		
		}		

 

Oto CSS:

#info
{
width:465px;
height:100px;	
padding:20px;
background-color:#27a38d;
color:white;
text-align:center;
position:absolute;
top:80px;
left:25%;
right:25%;
opacity:1.0;
z-index:1000000000000000000;
border-radius:15px;
line-height:20px;
}

Po zalogowaniu pojawia się div z komunikatem "witam uzytkowniku...." po kliknieciu w przycisk zamknij div znika z ekranu. Wszystko działa ale chciałbym żeby ten div zawsze byl wyśrodkowany. Jak za pomocą posicion:absolute i właściwości css do wyśrodkować. Bo w zależności od przeglaarki strona otwiera się w różniej wielkości. Pozdrawiam

Answer 1

Za pomocą position:

.info {
    position: absolute;
    top: 50%;
    left: 50%;
    
    transform: translate(-50%, -50%);
}

Tylko zauważ, iż dodałem klasę. Po ID się nie stylizuje.