CSS居中的各种实现方式

CSS中如何完美做到居中，一直是令前端工程师头疼的问题。最近读到CSS-TRICKS中的一篇帖子，将居中问题的解决方案策略化。感觉收获很大，翻译过来供大家交流学习。
当我们书写CSS时，让元素居中，是抱怨的爆发点之一：为什么会这么难？
我认为问题的关键，不在于怎么做，而在于我们如何从诸多居中方法中选择出适应当前情景的。
所以接下来，让我们一起创建一颗决策树，希望可以让居中变得简单。

水平居中

行内元素

我们可以通过对其父级块元素做如下处理来使行内元素居中。适用于inline,inline-block,inline-table,inline-flex等。

.center-children{
  text-align: center;
}

示例：