Trying to horizontally center DIV - html

Question

I am trying to horizontally center the div id="lastrow"
<div class="container">
<div class="row" style="text-align:center">
<div class="col-md-12">Name: <input type="text" id="name"><span class="vishid"> Name:</span></div>
<div class="col-md-12">Company: <input type="text" id="comp"><span class="vishid"> Company:</span></div>
</div>
<div class="row" style="text-align:center">
<div class="col-md-12">Address: <input type="text" id="addr"><span class="vishid"> Address:</span></div>
<div class="col-md-12">City: <input type="text" id="city"> ST: <input type="text" id="stat"> Zip: <input type="text" id="zip1">-<input type="text" id="zip2"><span class="vishid"> City:</span></div>
</div>
<div class="row" style="text-align:center">
<div class="col-md-12">E-Mail: <input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
<div class="col-md-12">Phone: (<input type="text" id="area">) <input type="text" id="pho1">-<input type="text" id="pho2"> Extension: <input type="text" id="exte"><span class="vishid"> Phone:</span></div>
</div>
<div class="row" id="lastrow" style="display: block;margin-left: 0;margin-right: auto; text-align:center">
<div class="col-md-12">
<div>
Message:
</div>
<div>
<textarea id="mssg"></textarea>
</div>
</div>
<div class="col-md-12">
<div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
</div>
</div>
</div>
I am not sure if you need the CSS file as most of it is regarding widths.
Thank you for your time,
Don

Answer 1

If you are using bootstrap-4 call the default class text-center to align the div center. If you want to make the design better refer the bootstrap form.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-md-12">Name:
<input type="text" id="name"><span class="vishid"> Name:</span></div>
<div class="col-md-12">Company:
<input type="text" id="comp"><span class="vishid"> Company:</span></div>
</div>
<div class="row text-center">
<div class="col-md-12">Address:
<input type="text" id="addr"><span class="vishid"> Address:</span></div>
<div class="col-md-12">City:
<input type="text" id="city"> ST:
<input type="text" id="stat"> Zip:
<input type="text" id="zip1">-
<input type="text" id="zip2"><span class="vishid"> City:</span></div>
</div>
<div class="row text-center">
<div class="col-md-12">E-Mail:
<input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
<div class="col-md-12">Phone: (
<input type="text" id="area">)
<input type="text" id="pho1">-
<input type="text" id="pho2"> Extension:
<input type="text" id="exte"><span class="vishid"> Phone:</span></div>
</div>
<div class="row text-center" id="lastrow">
<div class="col-md-12">
<div>
Message:
</div>
<div>
<textarea id="mssg"></textarea>
</div>
</div>
<div class="col-md-12">
<div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
</div>
</div>
</div>

Answer 2

Try to use bootstrap grid system, which is row and col class,
for example if you want to center the div write your div code between the following code.
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
//insert your div code to center
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext"
id="staticEmail" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-
label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword"
placeholder="Password">
</div>
</div>
</form>
<!-- a bootstrap col has 12 that's why am divide col by 4 to
center 4+4+4 = 12 -->
</div>
<div class="col-md-4">
</div>
</div>
</div>
//or follow this bootstrap forms layout to get this
https://getbootstrap.com/docs/4.3/components/forms/