Put 2 buttons div on my banner and center - html

Question

I would like to put 2 buttons div (register and login) on my banner and center. However I think that I already have a problem with my blocks on my html ??
Here is an overview of my website in below.
screenshot:
My first problem is that I don't can to use the margin-left or margin-right to move my button "register" or "login" for center.
My problem comes perhaps from code HTML, Is it a problem with my blocks ?
Here is my code HTML
<div class="my-banner">
<img class="banner" src="images/slider.jpg"/>
<div class="transparent"></div>
<img class="picture-logo" src="images/logo.png"/>
<div class="container">
<div class="myButtonRegister">REGISTER</div>
<div class="myButtonLogin">LOGIN</div>
<div class="topnav">
<a class="active" href="index.php">HOME</a>
ABOUT US
INVESTEMENT PLAN
NEWS
FAQS
RULES
CONTACT US
</div>
</div>
</div>
Here is my code CSS
.myButtonRegister{
margin-top: 342px;
float: left;
background-color: #C22312;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
}
.myButtonLogin{
margin-top: 342px;
float: left;
background-color: black;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
Do you have an idea plase ?

Answer 1

Just add a father box to your buttons and use flex to align your buttons. Here is an example:
.container {
height: 200px;
width: 100%;
background: #eee;
}
.container .subcontainer {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="subcontainer">
<button>Login</button>
<button>Register</button>
</div>
<!--NAV-->
</div>

Answer 2

Try following code for good design and set maximum height & width image in banner no issues create for this type of design this is the right way.
.myButtonRegister{
float: left;
background-color: #C22312;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
}
.myButtonLogin{
float: left;
background-color: black;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.button-action {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
<div class="my-banner">
<div class="banner-image">
<img class="banner" src="images/slider.jpg"/>
<div class="button-action">
<div class="myButtonRegister">REGISTER</div>
<div class="myButtonLogin">LOGIN</div>
</div>
</div>
<div class="transparent"></div>
<img class="picture-logo" src="images/logo.png"/>
<div class="container">
<div class="topnav">
<a class="active" href="index.php">HOME</a>
ABOUT US
INVESTEMENT PLAN
NEWS
FAQS
RULES
CONTACT US
</div>
</div>
</div>

Answer 3

Using position:absolute remove margin-top and give parent div to height and position:relative
.my-banner{
position:relative;
height: 450px;
}
.btnBox{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
bottom: 0px;
height: 85px;
width: 336px;
}
.myButtonRegister{
float: left;
background-color: #C22312;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
}
.myButtonLogin{
float: left;
background-color: black;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
<div class="my-banner">
<img class="banner" src="images/slider.jpg"/>
<div class="transparent"></div>
<img class="picture-logo" src="images/logo.png"/>
<div class="container">
<div class="btnBox">
<div class="myButtonRegister">REGISTER</div>
<div class="myButtonLogin">LOGIN</div>
</div>
<div class="topnav">
<a class="active" href="index.php">HOME</a>
ABOUT US
INVESTEMENT PLAN
NEWS
FAQS
RULES
CONTACT US
</div>
</div>
</div>