一种居中布局，用于叠加其他内容。
有关此方法及其效率的使用场景，请参阅完整文章。
完整文章 · YouTube 上的视频 · GitHub 上的来源
HTML
<article>
<h1 class="pop-n-plop">Pop n' Plop</h1>
</article>CSS
article {
position: relative;
}
.pop-n-plop {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}