如何使中心垂直和水平对齐div？

-3

能否请你告诉我如何使中心垂直和水平对齐div？我有两个div我需要显示在页面的中心。其次还有两个div之间出现一定的余量这里怎么去除余量是我的代码如何使中心垂直和水平对齐div？

<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%; 
}

我给顶和左.. ..它是最好的方式？以及如何删除利润？

来源

2015-09-21 user944513

直视Flexbox的 –

好，我愿买电子健康，尝试和更新你 – user944513

请更新 – user944513

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

来源

2015-09-21 09:52:25 nelek

为什么边缘存在于div @ – user944513

（如@ G.L.P）之间。写道，你必须删除这两个内部div之间的所有空间。 – nelek

@ user944513请参阅更新。 – nelek

尝试这样的：

<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

来源

2015-09-21 09:46:03

，但如何使中心对齐？..水平和垂直中心 – user944513

如何使中心垂直和水平对齐div？

回答

相关问题