CSS center content in relative wrapper - html

Question

I am making a personal website with a parallax background which takes 100% of the screen size, however when I change the screen size to the minimum size the text goes out of the div, I use a padding-top percentage. I do know quite a bit of css but I don't want to fiddle around and mess everything up, I've looked everywhere but no answer came close to my problem. Basically I just want to vertically and horizontally center my content even when I resize my screen.
Here's my CSS:
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 52.50%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-image: url('/storage/images/background.jpeg');
/* let's see it! */
color: white;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
margin-top: 15%;
text-align:center;
}
And my HTML:
<div class="row">
<div class="wrapper">
<div class="main">
<div class=text>
<img src="/storage/images/image.jpg" style="border-radius:100%; width:150px; height:auto;">
<h1>My name</h1>
</div>
</div>
</div>
</div>

Answer 1

Use :
.main {
text-align: center;<-----------------------
//More code..........
}
.text {
max-width: 150px;
text-align: center;
display: inline-block;
margin-top: 15%;
}
.text img {
border-radius:100%;
width:70%;
height:auto;
}
.text h1 {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 52.50%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-image: url('http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg');
/* let's see it! */
color: white;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.text {
max-width: 150px;
text-align: center;
display: inline-block;
margin-top: 15%;
}
.text img {
border-radius:100%;
width:70%;
height:auto;
}
.text h1 {
margin: 0;
padding: 0;
}
<div class="row">
<div class="wrapper">
<div class="main">
<div class=text>
<img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<h1>My name</h1>
</div>
</div>
</div>
</div>