以CSS为中心

以CSS为中心是一个臭名昭著的挑战，充满了笑话和嘲笑。 2020CSS已经长大了，现在我们可以诚实地嘲笑那些笑话，而不是咬牙切齿。

有不同类型的居中。从不同的用例，事物的数量到中心等。为了证明“获胜”背后的理由。居中技术，我创建了回弹力。这是针对每个中心策略的一系列压力测试，您可以在其中进行平衡，并观察它们的性能。最后，我展示了得分最高的技术，也是最有价值的技术。希望您走出新的对中技术和解决方案。

复原力铃声代表了我的信念，即对中策略应能适应国际布局，可变大小的视口，文本编辑和动态内容。这些原则帮助塑造了以下针对定心技术的弹性测试：

胜出的解决方案应通过在压缩，压缩，复制，编辑和交换各种语言模式和方向时保持内容居中，从而显示其弹性。值得信赖的弹性中心，一个安全的中心。

每个孩子都有白色背景色，因此您可以看到居中技术对孩子盒子大小（如果有）的任何影响

5种定心技术进入回弹振铃器，只有一种会收到回弹冠Crown。

简明扼要的显示将是很难的：网格和位置内容的简写。由于它集体地使儿童居中并证明其合理性，因此它是一种用于要阅读的元素组的可靠居中技术。

最宽的子项（最大内容）设置其余所有项的宽度。这将在Gentle Flex中进行更多讨论。

非常适合包含段落和标题，原型或通常需要清晰居中的事物的宏布局。

位置内容不是唯一显示：网格。显示：flexcan还可以从place-content和place-item速记中受益。

温和的Flex是一种更真实的仅居中策略。它柔和而柔和，因为与居中位置不同：居中，居中过程中不会更改任何儿童的盒子大小。尽可能轻柔地将所有物品堆叠，居中和隔开。

关键术语：宏布局就像一个国家的州或领地：非常高层次，大覆盖区域。宏布局创建的区域往往包含更多布局。布局覆盖的表面越少，就越不会成为宏观布局。当布局覆盖较少的表面积或包含较少的布局时，它将更多地成为微型布局。

容器设置为可弯曲，没有对齐样式，而直接子代使用自动边距样式。余量有一些怀旧和奇妙的地方：自动处理元素的所有面。

被推挤放置位置似乎不是最佳选择，并且可能导致更改孩子的盒子尺寸

参赛者＆＃34;蓬松的中心＆＃34;是迄今为止我们最令人赞叹的声音竞争者，并且是完全由元素/孩子拥有的唯一居中技巧。看到我们的内部粉红色边框！？

容器和物品之间会发生冲突，这自然是因为每个物品的尺寸都非常牢固

这个“流行”因为绝对定位会使元素脱离正常流程。 ＆＃34; plop＆＃34;名称的一部分来自于我觉得最有用的名称：在其他名称上加上该名称。这是一种经典且方便的叠加居中技术，可灵活灵活地调整内容大小。有时，您只需要将UI放置在其他UI之上。

如果我在一个岛上并且只能使用一种对中技术，那将是……

您总是可以在我的样式表中找到它，因为它对于宏布局和微布局都有用。这是一种全面可靠的解决方案，其结果符合我的期望。另外，由于我是一个固有的上瘾的瘾君子，因此我倾向于毕业于此解决方案。没错，要输入的代码很多，但是它提供的好处超过了额外的代码。

蓬松的中心是如此之细，以至于作为对中技术很容易被忽略，但这是我对中策略的主要内容。它是如此原子，以至于Iforget我有时会使用它。

哪些类型的事物破坏了您的居中策略？弹性振铃器还可以添加哪些其他挑战？我考虑了容器上的平移和自动高度开关……还有什么！

现在您知道我是怎么做的，您会如何？ 让我们多样化我们的方法，并学习构建网络的所有方法。 按照本文的代码实验室操作，以创建自己的居中示例，就像本文中的示例一样。 将您的版本推文，然后将其添加到下面的“社区混音”部分。