how do i make my button in the center of the img?

Question

how do i make my button in the center of the img?

                        <div className="" style={{
                                position: "absolute",
                                top: "50%",
                                left: "50%"
                            }}>
                            <a href="#" className="btn btn-solid" >
                                Wild Trends
                            </a>
                        </div>

Answer 1

add the following to the css for the button wrapper

transform: translate(-50%, -50%);

This will position it in the absolute middle

Answer 2

There are lots of ways doing it:

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  color: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="https://via.placeholder.com/300" alt="Snow" style="width:100%;">
  
  <div class="centered">Centered</div>
</div>