【问题标题】:How to center a div? xD [closed]如何让一个div居中? xD [关闭]
【发布时间】:2023-01-12 05:23:17
【问题描述】:

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

【问题讨论】:

标签: html center


【解决方案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%) 使其居中。

【讨论】:

  • SO 不允许仅链接答案。要么形成您自己的答案,要么完全删除它。 How to Answer
  • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生变化,仅链接答案可能会失效。 - From Review
  • @EsmaeelE 如果有人已经发表了适当的评论,请从评论队列中选择“不需要评论”。
猜你喜欢
  • 2015-08-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-02-22
  • 1970-01-01
  • 2011-01-17
  • 2013-02-28
  • 1970-01-01
相关资源
最近更新 更多