如何让一个div居中？ xD [关闭]

Question

有人帮我把 div 居中吗？ 我试过：align items center, align center..., 但我不能居中。很多人都有这个问题，但没有解决这个问题。 有人有同样的问题吗？

Answer 1

根据 Chris Coyier 的"Centering in CSS: A Complete Guide"：

中心分为三个部分。

横向

• 行内元素：使用文字对齐：居中
• 块元素：使用保证金：0自动；
• 不止一个块元素：使用弹性盒

垂直

• 内联和单行：使用填充和行高居中

• 内联和多行：使用垂直对齐

• 块元素，你知道它的高度（比方说 100px）： 使用位置：绝对;顶部：50%；高度：100px；边距顶部：-50px；

• 块元素和未知高度： 利用位置：绝对；顶部：50%；变换：平移Y(-50%)；

• 或者你可以使用 flex-box

垂直和水平

• 固定高度：使用位置绝对和负边距位置：绝对；顶部：50%；左：50%；边距：-70px 0 0 -170px；

• 未知高度：使用绝对位置和变换属性。位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；

*transform: translate(-50%, -50%) 使其居中。