Center button and image on browser movement - html

Question

So i'm trying to center my button and my image so when the page gets smaller it should still be aligned in the middle. Also my button is not centering.
i'm trying to make it look like : https://www.unrealengine.com
Try moving the page around and see what happens.
.header {
width: 100%;
height: auto;
}
.header img {
width: 100%;
height: auto;
z-index: -1;
}
.header h1 {
margin: 0;
height: auto;
width: auto;
position: absolute;
top: 20%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: white;
}
.myButton {
display: inline-block;
text-align: center;
position: relative;
height: auto;
background-color: #10b4f5;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 16px 31px;
text-decoration: none;
}
.myButton:hover {
background-color: #008fc7;
}
.myButton:active {
position: relative;
top: 1px;
}
<div class="header">
<img src="images/background2.jpg" alt="background">
</div>
EXPLORE

Answer 1

The easiest way to center something vertical and horizontal is using display flex. With align-items and justify-content this can be done quite easily. For more information see: A Complete Guide to Flexbox
header {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
<header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button>CTA Here</button>
</header>
EDIT:
This code snippet is based on OP's own code. There is no need to use a div with a header class when you can use the HTML5 header tag.
header {
background-image: url(images/background2.jpg);
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.myButton {
background-color: #10b4f5;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 16px 31px;
text-decoration: none;
}
.myButton:hover {
background-color: #008fc7;
}
<header>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
EXPLORE
</header>

Answer 2

Try this code.
HTML
<div class="header-wrap">
<div class="header">
<img src="images/background2.jpg" alt="background">
</div>
EXPLORE
</div>
CSS
.header-wrap {
text-align: center;
}
.header {
width: 100%;
height: auto;
}
.header img {
width: 100%;
height: auto;
z-index: -1;
}
.header h1 {
margin: 0;
height: auto;
width: auto;
position: absolute;
top: 20%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: white;
}
.myButton {
display: inline-block;
text-align: center;
position: relative;
height: auto;
background-color: #10b4f5;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 16px 31px;
text-decoration: none;
}
.myButton:hover {
background-color: #008fc7;
}
.myButton:active {
position: relative;
top: 1px;
}

Answer 3

The alignment of text is specified in the element the text is contained in, so in this case you should specify text-align: center;in the element which contains the button. Like so:
<div class="button-container">
EXPLORE
</div>
and in the CSS
.button-container {
text-align:center;
}