How to ensure buttons appear centered on different computer resolutions

Question

Mobile Resolution

So I'm using bootstrap and successfully center it, but when I change the resolution/zoom it out the buttons wrap and move slightly to the right, can anyone tell me what I'm doing wrong?

--HTML--
<div class="d-grid gap-2 col-2 mx-auto text-center">
       <button id="Get" class="btn btn-outline-success btn-lg" type="button">Latest upload</button> </div>

--CSS--
#Get {
    border-width: 4px;
    font-family: Lexend;
}

I tried to center it, it works for larger resolutions but is shifted to the left on mobile resolutions

Answer 1

You can try adding relative positioning position: relative to the parent <div> and then adding absolute positioning position: absolute to the button, And add left: 50%; top: 50%; transform: translate(-50%, -50%);.

This way, the button's position will be independent of resolution and screen size. Hope this solves your problem.

Answer 2

#Get {
    border-width: 4px;
    font-family: Lexend;
    margin: 0 auto;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="d-grid gap-2 mx-auto text-center">
       <button id="Get" class="btn btn-outline-success btn-lg" type="button">最新上传</button> </div>