We want to bring the button to the center of the image

November 28, 2021

button top of the image and vertical and horizontal center
I using margin but not properly work

without using margin

   <html>
        <head>
         <style type="text/css">
          .box-cover{
            width:100%;
            height:80vh;
          }
          button{
           padding:20px 30px;
           background-color:red;
           border:none;
           color:white;
           border-radius:5em;
          }
        </style>
       </head>
       <body>
        <div class="box">
         <img class="box-cover" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
         <button>Click ME</button>
        </div> 
       </body>
      </html>

>Solution :

.box-cover{
  width:100%;
  height:80vh;
  position: relative;
}
button{
  padding:20px 30px;
  background-color:red;
  border:none;
  color:white;
  border-radius:5em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="box">
  <img class="box-cover" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
  <button>Click ME</button>
</div>