一直在寻找其他答案,但没有一个有效。
我想在水平和垂直方向将每一行内的 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>
我试过 top
和 left:50%
和 transform
, margin: 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
是让您真正想要居中的任何方式 - 这还不清楚。
关于css - 无法将此 div 置于 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46739632/