Как сделать выравнивание по центру вертикально и горизонтально?

Question

Не могли бы вы рассказать мне, как сделать выравнивание по центру вертикально и горизонтально? У меня есть две дивов мне нужно отобразить на странице центра .Secondly есть некоторая разница между этими двумя дивами, как удалить этот запас вот мой код

<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/

мне нравится, что https://jsfiddle.net/tbnd90fd/1/

лучший способ?

.maindiv{ 

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

Я даю сверху и слева .. это лучший способ? и как удалить поля?

Answer 1

С .maindiv удалить text-align установите left и right к 50% и, наконец, , добавить один больше линия transform:translate(-50%, -50%);. Таким образом, верхний левый угол maindiv будет размещен в центре, а transform будет «тянуть» назад и оставлен на половину своего размера (и вам больше не нужен margin:auto).

Существует пример:

.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>

Обновление:

divs рассматриваются как инлайн-элементов. Подобно тому, как пробел или разрыв строки между двумя пролетами создает разрыв, он делает между встроенными блоками. Вы можете дать им отрицательный запас ... в этом примере, вы можете изменить, в moreinfo, margin:0px - margin:-2px;.

Существует fiddle example

Answer 2

Попробуйте так:

<div class="moreinfo">   
    </div><div class="moreinfo"></div> <!-- Remove the spaces --> 

CSS:

.moreinfo { 
    display:inline-block; 
    vertical-align: top; 
    margin:0px; 
    padding:0px; height:100px; 
    width:100px; 
    border:1px solid red; 
} 

Справочно: Попробуйте Link