CSS positioning button

Question

I am trying to position my button in the center left:50% top:50% but it ends up more than 50%. its a video background i am trying to do with overlay. i have the video tag in a is set to position: absolute; other text are position fine until when it comes to the button. i am thinking it's probably the way i position the video background but i'm not sure.i could really use some help on this thanks.

CSS

/*----Global----*/
}
* {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
html,body {
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}
.fullscreen-video-wrap{
 position: relative;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 overflow: hidden;
 opacity: 0.5;
}
.travel{
 position: absolute;
 top: 10px;
 left: 16px;
 z-index: -1;
 font-size:18px;
 font-family: Raleway;
}
.blue{
 color: rgb(0, 119, 255);
}
.motto{
 position: absolute;
 top: 27px;
 left: 16px;
 z-index: -1;
 font-size:14px;
 font-family: Abril Fatface;
}
.destination{
 position: absolute;
 text-align: center;
 top: 50%;
 left: 0;
 width: 100%;
 z-index: -1;
 font-family: Raleway;
 font-size: 18px;
}
.quotes{
 position: absolute;
 text-align: center;
 top:55%;
 left: 0
 width:100%;
 z-index: -1;
 font-family:Raleway;
 font-size: 14px;
}
.button{
 position: absolute;
 text-align: center;
 top: 60%;
 left: 50%;
 z-index: -1;
}

HTML

<!DOCTYPE html>
<html>
<head>
 <title>Traveling.com</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="New.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
</style>
<body>
 <div class="fullscreen-video-wrap">
  <video autoplay muted loop >
   <source src="videos/sunrise_01.mp4" type="video/mp4">
  </video>
 </div>
 <div class="header-content"></div>
 <h1 class="travel">Traveling<span class="blue">.com</span></h1>
 <p class="motto"><i>Travel <span class="blue">Beautifully</span></i></p>
 <h4 class="destination">Find your destination</h4>
 <p class="quotes">“A lie can travel half way around the world while the truth is putting on its shoes.” 
 ― Mark Twain</p>
 <button class="button">Sign up</button>
</body>
</html>

but can i ask why it work – Ross Linton Nov 14 '18 at 03:36 — Ross Linton, Nov 14 '18 at 03:36
Yes of course, I will edit the answer to explain you! – MartinBA Nov 14 '18 at 03:38 — MartinBA, Nov 14 '18 at 03:38

MartinBA · Accepted Answer · 2018-11-14T04:11:10.670

You can use a transform to translate the element -50%, this should work

.button{
    position: absolute;
    text-align: center;
    top: 60%;
    left: 50%;
    transform: translateX(-50%); /*Added*/
    z-index: -1;
}

Let me know if that help!

Edit

When you give to an element with position: absolute; a left: 50% it's never gonna be centered really, it will push him to the 50% of the father element, look at this picture

What I did adding transform: translateX(-50%); is move the element over itself -50%

Hope this helps you to understand, here you can find more information about translateX() function, and you can read about the transform property too.

CSS positioning button

1 Answers1