无法在 div 中居中此 div答案

【问题标题】：Can't center this div inside a div无法在 div 中居中此 div
【发布时间】：2017-10-14 09:09:05
【问题描述】：

一直在寻找其他答案，但没有一个有效。

我想将每行中的 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; 什么都没有。

【问题讨论】：

标签： css alignment center

【解决方案1】：

我删除了父级中的 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 是您真正想要居中的任何方式 - 这还不清楚。

【讨论】：