How to align a / / in center of the page, without using any CSS position property?

Question

Is there any other short and fast way to align to your <div> or <input> or anything? Suppose I want to make a bootstrap modal:

<!-- Trigger the modal with a button -->
<li>
    <button type="button" class="fa fa-search fa-2x search-icon" data-toggle="modal" data-target="#search"></button>
</li>
  
<!-- Modal -->
<div id="search" class="modal fade" role="dialog">
 <div class="modal-dialog search">
       <!-- Modal content -->
    <div class="modal-content">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
      <input class="searchArea" type="search" placeholder="Search Here">
       </div>
 </div>
</div>

If I make a modal and want to add <input type="search"> in the modal, and without any CSS positioning (top left right bottom), can I put the INPUT SEARCH box in the center of the page?

Answer 1

Use auto margins for left and right. For example:

.searchArea {
  margin-left: auto;
  margin-right: auto;
  /* or, for example, margin: 20px auto; */
}

Answer 2

Seems like Bootstrap's text-center class does the job:

<div class="text-center">
    <button type="button" class="btn" data-dismiss="modal">Close</button>
    <input class="searchArea" type="search" placeholder="Search Here">
</div>

Fiddle

Answer 3

you could use

<center></center>

... but is deprecated

another way is using class of bootstrap

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

thanks to TylerH in her answer... https://stackoverflow.com/a/18153551/4102927
but this is css in background