3 种让 div 元素居中的方法 + 人生建议

几年前，当我还是个初级开发者的时候，像让一个div元素居中这样的任务，对我来说既简单又难。它听起来非常容易理解，但你却不知道该怎么做（尽管你可能在编程训练营里见过很多次）。然后就开始上网搜索，我们都知道接下来会发生什么。

我想让你知道的是，这完全没问题！不知道某些事情很正常，无论它看起来多么简单（或多么困难）。另一方面，真正需要强调的是找到答案的能力（这也是一种技能，要像对待技能一样对待它）。这才是关键！现在，当我用谷歌搜索时，我大概能感觉到答案是否在某个页面上。你也会找到答案的，继续努力！

现在，让我们把这个 DIV 居中：

<section>
    <div class='centre'>
        test
    </div>
</section>

.centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.centre {
    display: flex;
    justify-content: center;
    align-items: center;
}

.centre {
    display: grid;
    place-items: center;
}

下次再见，
达利博尔

菜单