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

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>

CodePudding user response：

Do you mean this result?

.box {
  position: relative;
}
.box-cover{
  width:100%;
  height:80vh;
}
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>

CodePudding user response：

.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>

CodePudding user response：

If I mean and understand:

    .box {
        text-align: center;
    }

CodePudding user response：

Once you set a width on your container class box you can use text-align: center; to center the button.

.box-cover{
  width: 100%;
  height:80vh;
}
button {
  padding:20px 30px;
  background-color:red;
  border:none;
  color:white;
  border-radius:5em;
  text-align: center;
  
}
.box {
  width: 100%;
  text-align: center;
}

<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>