Question

你可以告诉我如何使中心对齐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%;
}

我给出了顶部和左边..这是最好的方式吗？以及如何删除边距？

Answer 1

从.maindiv移除text-align，将left和right设置为50%，最后再添加一行transform:translate(-50%, -50%);。通过这种方式，maindiv左上角将放置在中心，transform将＆＃34;拉＆＃34;备份并留下自己的一半大小（你不再需要margin:auto）。

有例子：

＆＃13;

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

＆＃13;

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

＆＃13;

更新：

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

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

2 个答案: