<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outer {
position: relative;
margin: 5%;
width: 80%;
height: 500px;
border: 2px solid #1703fc;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
text-align: center;
border: 2px solid #468a4d;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">A centered text.
<br/>The length of the text, height or width does not matter.</div>
</div>
</body>
</html>