一直在寻找其他答案,但没有一个起作用。

我想将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;,什么也没有。

最佳答案

我在父级中删除了position:absolute; display:inline-block;display:inline-block;,并将绿色div居于蓝色div的中心(我添加了彩色边框,使div可见):



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





因此,margin: 0 auto是您真正想居中的方法,目前尚不清楚。

09-10 10:28
查看更多