一个网站的上线流程,博客登录注册,拼多多一件代发免费货源,海口可信的海南网站建设前言
长期以来#xff0c;如何在父元素中居中对齐一个元素#xff0c;一直是一个让人头疼的问题#xff0c;随着 CSS 的发展#xff0c;越来越多的工具可以用来解决这个难题#xff0c;五花八门的招式一大堆#xff0c;这篇博客#xff0c;旨在帮助你理解不同的居中方法…前言
长期以来如何在父元素中居中对齐一个元素一直是一个让人头疼的问题随着 CSS 的发展越来越多的工具可以用来解决这个难题五花八门的招式一大堆这篇博客旨在帮助你理解不同的居中方法并提供一整套策略帮助你在各种场景下进行居中对齐。说实话这比我最初想象的要有趣得多 。不管你是技术大牛还是萌新小白我相信至少有一种是适合你的
自动边距居中对齐
我们首先来看一种最简单的应该也是大家使用最多的如果我们想要水平居中对齐一个元素可以使用设置为边距 auto 来实现
.element {max-width: fit-content;margin-left: auto;margin-right: auto;
}这种方式首先需要限制元素的宽度默认情况下流式布局中的元素会水平扩展以填充可用空间所以无法真正居中一个满宽的元素可以通过固定宽度来约束元素例如 200px但实际上想要的效果是让元素根据其内容进行自适应fit-content 是一个神奇的值它正好能实现这一点它基本上能让“width”属性的表现效果类似于“height”使得元素的尺寸由其内容决定。
为什么要设置 max-width 而不是 width因为目标是限制元素的最大宽度如果使用 width则元素会被固定在那个大小上当容器非常窄时元素可能就会溢出。
当元素的宽度已经固定之后就可以通过设置边距的auto属性来进行居中对齐。每个属性为auto的边距都会尽可能地占据元素空间。例如如果只设置 margin-left: auto 会发生什么
.element {max-width: fit-content;margin-left: auto;
} 当只有 margin-left 设置为 auto 时所有的多余空间都会分配到左边距上。而当同时设置 margin-left: auto 和 margin-right: auto 时两个边距会均等地分配空间这样元素就会被居中对齐我之所以一来就写 margin-left 和 margin-right 是因为它们比较常见但实际上还有一种更理想的方法来实现居中对齐
.element {max-width: fit-content;margin-inline: auto;
} margin-inline 直接设置水平方向的边距他可以设置与 margin-left 和 margin-right 相同的值如 auto并且兼容性也相当完美几年前就已经被所有主要浏览器所支持 margin-inline 不仅仅是 margin-left 和 margin-right 的简写它是逻辑属性集合的一部分旨在简化网络国际化过程。在英语中字符是从左到右水平书写的。这些字符组成单词和句子形成“块”如段落、标题、列表等。这些块垂直堆叠从上到下排列。这可以视为网站的书写方向然而这并不是全球通用的一些语言如阿拉伯语和希伯来语是从右到左书写的。其他语言如中文在历史上书写方式是纵向书写的字符从上到下排列块则从侧面排列。 逻辑属性的主要目标是创建一个抽象层超越这些差异与其分别为从左到右的语言设置 margin-left而为从右到左的语言设置 margin-right不如使用 margin-inline-start。这样边距会根据页面的书写方向自动调整到正确的一侧。 虽然这种方法已经算比较老了但就我自己而言是经常使用它的如果想将单个子元素居中而不影响其任何兄弟元素时这种方法特别有用例如博客文章中段落之间的图像。
Flexbox 居中
Flexbox 的设计旨在提供对沿主轴分布一组项目的强大控制。它提供了一些非常强大的工具来实现居中对齐
首先我们来看如何使用 Flexbox 将单个元素在水平和垂直方向上都居中对齐
.container {display: flex;justify-content: center;align-items: center;
} Flexbox 居中有一个特点就是即使子元素超出了容器的范围它仍然能正常工作尝试缩小容器的宽度或高度不难发现元素就算是溢出了也是对称地溢出
此外这种方法同样适用于多个子元素可以使用 flex-direction 属性的row / column / row-reverse / column-reverse 这四个属性值来控制子元素的排列方式
.container {display: flex;flex-direction: row / column / row-reverse / column-reverse;justify-content: center;align-items: center;gap: 4px;
} 在多种居中对齐的方式中这个方式可能是我最常使用的它是一个非常通用的选择
在视口内居中对齐
到目前为止本文讨论了如何在父容器内居中对齐一个元素。但是如果我们想要在其他上下文中居中对齐元素呢例如弹窗、提示框等元素需要在视口内居中对齐呢这就涉及到定位布局positioned layout当想要将元素从正常文档流中抽离并将其固定到某个位置时使用的布局模式。
下面是这种布局的效果示例
.element {position: fixed;inset: 0px;width: 12rem;height: 5rem;max-width: 100vw;max-height: 100dvh;margin: auto;
} 到现在为之所有提到的方法中这种方式可能是最复杂的一种具体逐步解析如下 使用 position: fixed 将元素固定在视口中。视口可以比作一块挂在网站前面的玻璃窗就像火车窗户显示着外面的风景。使用 position: fixed 的元素就像窗花一样。 接下来设置 inset: 0px这是一个简写属性将 top、left、right 和 bottom 全部设置为 0px仅使用这两个属性元素会伸展以填充整个视口使其离每个边缘都为 0px。这在某些情况下可能有用但这里的目标是限制元素的尺寸具体选择的值会根据实际情况有所不同但通常需要设置默认值如 width 和 height以及最大值如 max-width 和 max-height以确保元素在较小视口中不会溢出。
不过有一个有趣的现象如果设置了一个不可能的条件就比如元素不能同时离左边缘 0px 和右边缘 0px同时宽度仅为 12rem假设视口宽度大于 12rem的话只能选择其中两个条件 如果将元素固定在左边缘并设置其宽度为 12rem这样的话它就无法同时离右边缘 0px。
CSS 渲染引擎通过优先级来解决这个矛盾它会优先考虑宽度限制如果无法同时固定在左边缘和右边缘它会根据页面当前的语言环境来选择一个选项例如在像英语这样的从左到右的语言中元素会靠近左边缘。
BUT当引入 margin: auto 时就会发生些有意思的变化这会改变浏览器解决不可能条件的方式元素不再固定在左边缘而是被居中对齐。
不同于流式布局中的自动边距这个技巧可以用来同时在水平和垂直方向上居中对齐元素。
.element {position: fixed;inset: 0px;width: 12rem;height: 5rem;max-width: 100vw;max-height: 100dvh;margin: auto;
} 要记住这些要点可能会有些复杂但这个方式的关键有四个要素
固定定位Fixed Positioning通过 inset: 0px 固定到四个边缘限制宽度和高度自动边距Auto Margins
这个方式也可以用来在单个方向上进行居中对齐例如可以使用相同的方法创建一个水平居中的 通知同时将其固定在视口的底部附近
.element {position: fixed;left: 0px;right: 0px;bottom: 8px;width: 12rem;max-width: calc(100vw - 8px * 2);margin-inline: auto;
} 通过省略 top: 0px 后移除了垂直方向上的不可能条件使得通知固定在底部边缘为了使其看起来更加美观这里还使用了 calc 函数来设置最大宽度这样元素周围始终有一定的缓冲空间 另外上述方法需要给元素指定具体的大小。如果不知道元素的确切尺寸如何处理呢 我相信不少小伙伴通常会使用 transform 技巧来解决这个问题但现在可以利用 fit-content 来达到相同效果
.element {position: fixed;inset: 0;width: fit-content;height: fit-content;margin: auto;
} 这样会使元素根据其内容进行缩小。如果需要可以设置最大宽度max-width来进行限制但并不强制要求设置最大宽度元素会自动保持在视口范围之内。
Grid布局
通过 CSS Grid可以非常方便地实现元素的水平和垂直居中对齐。
.container {display: grid;place-content: center;
} place-content 属性是 justify-content 和 align-content 的简写将相同的值应用于行和列。这样会生成一个 1×1 的网格其中单元格正好位于父容器的中央。 这种解决方案看起来与 Flexbox 方案非常相似但需要注意的是它使用的是完全不同的布局算法。在实际工作中实际上Grid布局 方案在某些情况下的效果不如 Flexbox 方案那么普遍适用。例如以下设置 没想到吧为什么Grid布局之后文本内容变得这么小
问题就在于子元素的 width: 50% 和 height: 50% 是相对于网格单元格的。与 Flexbox 不同在 Flexbox 中这些百分比是基于父元素 .container 的。 在 Grid布局中这些百分比是相对于网格单元格的也就是说子元素的宽度是其所在列的 50%高度是其所在行的 50% 由于没有为行和列指定明确的尺寸也没有定义 grid-template-columns 或 grid-template-rows网格轨道会根据内容自动计算其尺寸即“收缩包裹”在每个行/列中的内容。最终网格单元格的尺寸与 .element 的原始尺寸相同然后元素会缩小到该网格单元格的 50% 大小。 这是一个非常复杂的话题为了不偏离本次主题也就不继续展开了。重点是Grid布局是一个复杂的布局算法有时这种额外的复杂性会带来未知的bug虽然可以通过添加更多 CSS 来修复这个问题但使用 Flex
居中对齐多个元素
CSS Grid 还提供了另一个强大的居中功能。通过 CSS Grid可以将多个元素放置在同一个单元格中这样就能轻松实现多个元素的居中对齐。 依然使用 1×1 的网格只不过现在将多个子元素放置在同一个单元格中通过 grid-row 和 grid-column 来实现。为了更清楚地说明这种设置下面是一个简单的 HTML 示例
div classcontainerimg classelement /img classelement /img classelement /img classelement /
/div
在其他布局模式下元素通常会水平或垂直堆叠但使用Grid 布局设置时元素会在同一个网格空间内前后堆叠这样它们就会重叠在一起即使子元素的尺寸不同这种方法仍然有效来看一下这个示例 在这个示例中添加了红色虚线来显示网格的行和列它们会自动扩展以容纳最大的子元素所有元素添加后结果单元格的宽度和高度与图片相同为了确保不会出现任何问题还需要一个额外的属性place-items: centerplace-items 是 justify-items 和 align-items 的简写这些属性控制网格单元格内图片的对齐方式。如果没有这个属性虽然网格单元格仍会居中但单元格内的图片会堆叠在左上角。 文本居中
文本在 CSS 中是一个特殊的情况无法使用上面提到的任何方式来影响单个字符的对齐方式。
例如如果尝试使用 Flexbox 来居中一个段落我们只能居中整个文本块而不是文本本身 Flexbox 可以将段落在视口内居中但它不会影响文本中的单个字符字符仍然保持左对齐。
为了居中文本内容需要使用 text-align 属性 更好的居中方式
之前我们看到使用自动边距可以在流式布局中水平居中元素如果希望该元素垂直居中则需要切换到其他布局模式例如 Flexbox 或 Grid。
接下来看看这个方法 这是什么情况呢align-content 是 CSS Grid 的属性但我们在这里并没有设置 display: grid。这是怎么回事
其实 CSS 它实际上是一系列布局算法的集合编写的属性是这些算法的输入align-content 最早在 Flexbox 中实现并在 CSS Grid 中发挥了更大的作用但它并未在默认的流式布局Flow layout算法中实现直到现在。截至 2024 年初浏览器厂商正在逐步将 align-content 实现在流式布局中以控制内容在“块”方向上的对齐。当前这个新特性仅在 Chrome Canary需要开启实验标志和 Safari 技术预览版中可用。
上面只是个演示在 Chrome Canary 和 Safari TP 中体验了 align-content 的新支持然后用 Flexbox 重新创建了相同的效果 真实项目里可以这样使用吗 从我观察的情况来看这个新选项并没有解锁任何新的可能性至少在我可以创建的 UI 类型方面已经可以使用本教程中探讨的技术来实现相同的效果。尽管如此我还是期待它能广泛普及毕竟感觉有点不必要的是必须切换到完全不同的布局模式才能完成居中对齐的操作。 结语
接触前端这么多年来我曾把 CSS 看作是一系列模式的集合实际上有很多方法可以用来解决当前遇到的问题。这种方法虽然能奏效但也感觉有些局限。时不时地一些看似正常的代码会突然出现问题实际运行效果和以前完全不同。花时间深入学习 CSS 时之前老旧的固定方式而是能够凭直觉灵活的来解决问题✨
在本文中探讨了一些实用的居中模式希望它们能在你需要居中对齐时派上用场。其这也只是触及了CSS 中居中对齐的冰山一角与其死记硬背更多的代码片段不如建立一个全面的 CSS 理解模型这样可以即时提出解决方案
如果你觉得这个教程有用可以点点赞啦~~
