⭐ 0
🔍
文字 图片 PDF 和文档 音频 音乐 电子电路 时间 公用事业 验证者 玄学 游戏

如何在 CSS 中将 Div 居中 (Flexbox)

直观地构建 CSS Flexbox 布局：flex-direction、justify-content、align-items、flex-wrap 和容器上的间隙，以及每个子项的 flex-grow、flex-shrink 和 flex-basis，所有这些都具有实时预览和可复制的 CSS。

处理中... 0%

结果

这是 CSS 中最常见问题的直接答案：要使 div 居中，请将 display: flex、 justify-content: center 和align-items: center 放在其父级上。就是这样——容器上的三个声明，并且子元素在水平和垂直方向上都完美居中，无论大小如何。此页面将打开生成器，并已应用该组合，因此下面的预览显示它现在正在处理三个编号的框。

在 Flexbox 出现之前，将 div 居中需要一些技巧： margin: 0 auto 仅水平居中并且仅适用于固定宽度的块；垂直居中意味着位置：带有负边距的绝对居中或变换技巧，两者在内容改变大小时都很脆弱。 justify-content 处理主轴，align-items 处理横轴——无论孩子有多高或多宽，它们一起在两个方向上居中，这正是这对成为标准答案的原因。

拖动下面的任何控件，并观察三个预览框在容器改变形状时保持居中，或在它们之间添加间隙。当它看起来正确时，将底部的 CSS 块直接复制到样式表中 - 它在每个现代浏览器中以相同的方式运行，不需要库。

🛡️
在浏览器中执行

您的文件和输入永远不会离开此设备。处理完全离线运行。 100% 安全。

接受的格式和规则

  • 容器控件：flex-direction、justify-content、align-items、flex-wrap 和以像素为单位的间隙输入，实时应用于预览。
  • 默认情况下三个颜色编码的子框（添加最多八个，删除两个），每个都有自己的 flex-grow、flex-shrink 和 flex-basis 字段。
  • 可复制的 CSS 块，其中包含 .flex-container 规则以及每个具有非默认 Flex 属性的子项的 .flex-item-N 规则。

主要优点

✓ 每个容器控件和每个子级的 flex-grow、flex-shrink 和 flex-basis 都会实时更新三个编号的预览框，因此您可以在接触样式表之前准确地看到 Flexbox 规则的作用。
✓ 生成器仅打印实际上与 CSS 默认值不同的子规则，因此复制的代码保持简短且可读，而不是在每个框上重新声明 flex-grow: 0。
✓ 预设页面解决了人们按名称搜索的布局：将 div 居中、徽标-左链接-右导航栏和等宽灵活列 - 打开其中一个，工具就已经配置好了。

使用案例

  • • 通过观看 justify-content 和align-items 在实时预览框中的工作情况，获取精确的 CSS 以水平和垂直居中 div。
  • • 构建一个徽标左、链接右的导航栏布局，其中包含 space- Between 和align-items: center，然后将容器 CSS 直接复制到标头组件中。
  • • 在相同的三个盒子上并排比较间距、周围间距和均匀间距，而不是猜测哪一个与您想要的间距匹配。