Why this button is not getting center? - html

Question

I am using bootstrap V5 and i wanted to center the login button in the div and i am using mx-auto and also tried text-center but none of this is working.
Where am i getting wrong.
<div className='container my-auto w-50' style={{backgroundColor:"#E8D2A6"}}>
<div className="text-center my-4" style={{fontSize:"2.5rem"}}>Login</div>
<div className="form-group row">
<label htmlFor='userid' className='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter UserId:</label>
<div class="col-8">
<input type="text" id="userid" className='form-control' placeholder='Enter user id'/>
</div>
</div>
<div className="form-group row my-3">
<label htmlFor='userid' className='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter Password:</label>
<div class="col-8">
<input type="text" id="userid" className='form-control' placeholder='Enter Password'/>
</div>
</div>
<button type='button' className="mx-auto btn btn-danger btn-block text-center">Login</button>
</div>

Answer 1

Try this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container my-auto w-50' style={{background-color:"#E8D2A6"}}>
<div class="text-center my-4" style={{fontSize:"2.5rem"}}>Login</div>
<div class="form-group row">
<label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter UserId:</label>
<div class="col-8">
<input type="text" id="userid" class='form-control' placeholder='Enter user id'/>
</div>
</div>
<div class="form-group row my-3">
<label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter Password:</label>
<div class="col-8">
<input type="text" id="userid" class='form-control' placeholder='Enter Password'/>
</div>
</div>
<div class="form-group row">
<button type='button' class="w-auto mx-auto btn btn-danger btn-block text-center">Login</button>
</div>
</div>