javascript - how to make centre align divs vertically and horizontally? -

could please tell me how make centre align divs vertically , horizontally ? have 2 divs need display on centre of page .secondly there margin between 2 divs how remove margin here code

  <div style="height:100px;width:100px;border:1px solid red;"class="moreinfo">   </div>         <div style="height:100px;width:100px;border:1px solid red" class="moreinfo">   </div>  

https://jsfiddle.net/tbnd90fd/

i https://jsfiddle.net/tbnd90fd/1/

best way?

.maindiv{      text-align: center;     position: absolute;     left: 45%;     top: 45%; } 

i give top , left ..is best way ? , how remove margins?

from .maindiv remove text-align, set left , right 50% and, finally, add 1 more line transform:translate(-50%, -50%);. way, maindiv upper left corner placed in center , transform "pull" , left half size of (and don't need margin:auto anymore).

there example :

.moreinfo {      display: inline-block;      margin:0px;      padding:0px;  }  .maindiv  {      position: absolute;      left: 50%;      top: 50%;      margin:0;padding:0;      transform:translate(-50%,-50%);  }

  <div class="maindiv">         <div style="height:100px;width:100px;border:1px solid red;"class="moreinfo"></div><div style="height:100px;width:100px;border:1px solid red;" class="moreinfo"></div>   </div> 

update :

the divs treated inline-elements. space or line-break between 2 spans create gap, between inline-blocks. give them negative margin... in example, change, in moreinfo, margin:0px margin:-2px;.

there fiddle example