无法将此div放在div中

时间:2017-10-14 00:30:14

标签: css alignment center

一直在寻找其他答案,但没有找到答案。

我想在水平和垂直方向上将div放在每一行内,似乎没有任何效果。

<div class="border" style="width:100%; height:500px; min-height:500px; position:relative;">
    <div class="border" style="display:inline-block; width:33%; height:500px; position:relative;">
        <div class="border" style="width:90%; height:90%; position:absolute; display:inline-block; margin: 0 auto;"/>
    </div>
    <div class="border" style="display:inline-block; width:33%; height:500px;"/>
    <div class="border" style="display:inline-block; width:33%; height:500px;"/>
</div>

我尝试使用topleft:50%以及transformmargin: 0 auto;一无所获。

1 个答案:

答案 0 :(得分:0)

我在父级中删除了position:absolute; display:inline-block;以及display:inline-block;,并将绿色div置于蓝色区域内(我添加了彩色边框以便div显示):

&#13;
&#13;
<div class="border" style="border: 1px solid red; width:100%; height:500px; min-height:500px; position:relative;">
    <div class="border" style="border: 3px solid blue; width:33%; height:500px; position:relative;">
        <div class="border" style="border: 3px solid green; width:90%; height:90%; margin: 0 auto;"/>
    </div>
    <div class="border" style="border: 1px solid orange; display:inline-block; width:33%; height:500px;"/>
    <div class="border" style="border: 1px solid black; display:inline-block; width:33%; height:500px;"/>
</div>
&#13;
&#13;
&#13;

所以margin: 0 auto是实现你想要的中心的方式 - 目前还不清楚。