居中艺术：在网页设计中实现完美居中布局的挑战与解决方案-低调大师

居中艺术：在网页设计中实现完美居中布局的挑战与解决方案

2024-05-22 360

引言

在数字时代，用户与界面的每一次互动都是对产品体验的一次投票。完美的用户体验往往建立在细节之上，而对齐——尤其是居中布局——是这些细节中的关键一环。居中布局不仅仅是一种视觉美学的追求，它更是一种信息呈现的逻辑，能够引导用户的注意力，提升阅读和浏览的舒适度。

然而，正如 Niki 在其个人博客上发表的文章《计算机科学里最大的难题：居中显示》中所讲，实现完美的居中布局并非易事。它涉及到对字体度量、行高、图标与文本对齐等复杂问题的深入理解，并且需要设计师和开发者齐心协力。

居中的重要性

在网页设计中，居中对齐通过创建清晰的视觉焦点，有效减轻用户的认知负担，并帮助他们快速把握页面核心内容和结构。居中的设计元素，如标题和按钮，能显著提升页面的吸引力和专业度。

当呈现给最终用户时，很多知名公司的应用和网站仍然存在居中对齐的问题。你是否曾经也注意到了这些歪歪扭扭的居中对齐了呢？

Github按钮中图标和文本没有居中对齐。

图片来源于:https://tonsky.me/blog/centering

X(Twitter)没有居中对齐

图片来源于：https://tonsky.me/blog/centering

Apple在Big Sur操作系统中没有对文本居中对齐

图片来源于：https://grumpy.website/938

在本文中，我们将深入探讨设计师和开发者在实现居中对齐时遇到的难题，同时发掘 CSS 和 SVG 在这一过程中的不足之处。通过分析现状，我们将提出一系列解决方案和最佳实践，旨在帮助读者提升网页和应用程序的对齐质量，从而优化用户体验。

在设计工具中便捷的居中布局能力

在 Figma 中，通过选择一个或多个元素并应用居中对齐，设计师能够迅速实现在容器内的水平和垂直居中，而无需手动计算像素。此外，还可以通过其直观且强大约束功能对元素进行限制，例如固定元素的宽度和高度，然后启用中心约束，以确保元素在容器大小变化时，依然保持水平和垂直方向的居中。这极大地简化了设计师在设计阶段的工作流程。

在 Figma 中，对图形添加约束条件以实现居中

对于文本内容的居中展示，Figma 同样提供了丰富的对齐属性，使得文本的布局既美观又符合设计意图。

在Figma中，可以对文本应用的居中属性

Figma 还提供了如 Auto Layout 和 Layout Grids 等强大的布局工具，这些工具在设计阶段帮助设计师创建响应式设计。虽然这些工具在概念上与 CSS Flexbox 类似，但它们是专为设计界面而设计，提供了更加直观的操作方式。

Figma 中的 Auto Layout 功能

CSS 中布局属性对于元素居中的支持

当设计跃入开发阶段，开发者需要根据设计稿编写相应的 CSS 代码来实现类似的布局效果，挑战随之而来。开发者面临的任务不仅仅是将设计精确地转化为代码，还要确保这些设计在不同设备和浏览器上的兼容性和一致性。从设计到代码的转换过程中，开发者需要深入理解CSS的布局机制，并运用其提供的多种居中方案来实现设计的视觉要求。 比如使用下面的一些布局模型：

传统方法：利用 margin: auto; 可轻松实现块级元素的水平居中，这是最基础也是最广泛支持的方法。
Flexbox 布局 ： Flexbox 通过 align-items 和 justify-content 等属性，为一维布局中的居中对齐提供了简洁的解决方案。
Grid 布局： Grid布局进一步扩展了居中能力，通过 place-items 属性在二维空间中实现精准对齐。
结合 position 和 transform： 对于需要更精细控制的场合，结合 position: absolute; 和 transform: translate(); 可以提供更复杂的居中方案。

SVG 中居中布局挑战

在 SVG 中，提供了一种不同于 CSS 的布局系统。SVG 元素通常是基于它们的 x 和 y 坐标来定位，而不是依赖于块级或内联级布局模型。这意味着 SVG 内部的 <svg> 元素并不直接支持 CSS 的 Flexbox 或 Grid 布局。

在 SVG 1.1 中，通常可以通过以下几种方法实现元素居中：

使用 viewBox 和 preserveAspectRatio：通过 viewBox 属性，我们可以定义 SVG 内部的一个坐标系统，而 preserveAspectRatio 属性则控制着当 SVG 缩放以适应不同尺寸的容器时，内容如何适配视口。这两者结合使用，可以创建一个灵活的布局框架。
数学计算：手动计算并设置元素的 x 和 y 坐标，以确保它们在 SVG 画布上居中。
text-anchor 属性：对于文本元素，text-anchor="middle" 属性可以确保文本在水平方向上居中显示。
dominant-baseline 属性：对于文本的垂直居中，dominant-baseline="middle" （或在某些情况下使用 central ）可以用来调整文本的基线，实现垂直居中。
包裹元素：将需要居中的元素放入一个 <g> 元素中，然后对 <g> 元素应用 transform 属性进行平移或缩放，以实现居中效果。

但每种方法都有其局限性或需要开发者考虑的方面：

使用 viewBox 和 preserveAspectRatio：

虽然 viewBox 提供了一个强大的方法来缩放 SVG 内容，但如果不正确使用，它可能导致内容在不同尺寸的容器中出现意外的变形或位置偏移。并且需要仔细考虑 preserveAspectRatio 的值，以确保内容在缩放时保持设计意图。
数学计算：手动计算坐标可能会非常繁琐，尤其是对于复杂的 SVG 或在响应式设计中需要适应多种屏幕尺寸时，这基本是不可能的挑战。
text-anchor 属性：

text-anchor 属性主要用于文本内容的水平居中，它不提供垂直居中的功能。并且对于非文本元素或需要垂直居中的场景，需要额外的方法或属性提供支持。
dominant-baseline 属性：

dominant-baseline 的使用可能因浏览器而异，某些浏览器可能不支持或表现不一致。
包裹元素：

将元素包裹在 <g> 元素中并使用 transform 属性虽然提供了灵活性，但也可能增加 SVG 的复杂性，尤其是在大型项目中管理多个 <g> 元素时。需要仔细管理 <g> 元素的层级和应用的变换，以避免样式的冲突或不可预期的结果。

SVG 以其矢量图形的无限缩放能力和跨多设备兼容性而受到重视，但在复杂布局方面存在局限。在前文中我们也提到，SVG 并不能直接应用 CSS Flexbox 或 Grid 布局系统，这限制了开发者在 SVG 内部实现高级布局的能力。

尽管 SVG 可以嵌入 HTML 并接受 CSS 样式，利用 Flexbox 或 Grid 对 SVG 容器进行布局，从而实现复杂的居中和对齐效果。这确实为开发者提供了一条解决 SVG 布局限制的路径。但是新的问题也可能会随之而来：SVG 属性和 CSS 样式可能发生冲突。如 text-anchor 与 text-align 在文本对齐上的相互作用，需要开发者判断优先级并谨慎处理。

此外，浏览器对 SVG 和 CSS 的支持差异可能导致 SVG 元素在不同环境下表现不一致。因此，开发者需要在多个浏览器和设备中进行测试，并准备解决方案以确保布局的兼容性和一致性。

当前，我们被困在 SVG 的诸多限制之中，面对着一系列令人沮丧的挑战。随着 SVG 2 正式规范的步伐缓慢前行，我们不禁要问：我们还要等待多久才能迎来那些承诺中的改进？还要在不完善的解决方案中挣扎多少年？SVG 的属性冲突问题真的能够得到解决吗？这些问题的答案仍然是一片迷雾。设计和开发工作被迫依赖于过时的技巧和权宜之计，这不仅限制了创造力，也阻碍了为用户提供最佳体验的能力。

VGG 中居中对齐的最佳实践

VGG Specs 引入了一系列先进的布局模型和属性，极大地简化了精准居中对齐的实现过程。这些属性不仅使得设计师的设计意图得以完美呈现，还为开发者提供了强大的工具，以确保用户界面的精确布局。开发者不再需要手动编写繁琐的代码来实现设计师的创意，从而显著简化了开发流程并减少了错误。这一过程不仅提升了开发效率，还确保了用户界面在不同平台和设备上的兼容性和一致性。

通过 VGG Specs 实现的 Flex 和 Grid 布局模型，开发者能够对矢量图形执行复杂的布局任务，就像操作网页中的其他元素一样自然。这些模型的灵活性和强大功能，让设计图形的布局变得直观而高效。而 Constraint 布局模型则可以进一步增强了对元素位置和尺寸的精确控制。无论是需要严格遵守特定尺寸的图形，还是必须在特定位置展示的元素，Constraint 布局都能提供必要的支持。

例如，设计师在 Figma 中设计了一个带有 Auto Layout 的按钮。在这个按钮设计中，设计师利用 Auto Layout 的功能，确保按钮的边缘与其所处容器的边缘保持一致，同时在垂直和水平方向上居中。

对于按钮上的文字展现，设计师采取了在垂直和水平方向的居中对齐。在 Figma 中，这可以通过设置文本框的对齐属性来实现。设计师选择了文本框，并应用了水平居中和垂直居中对齐，使得文本无论在何种屏幕尺寸下都能保持居中显示，增强了按钮的可读性和美观性。

开发者在将这个设计转化为实际的前端代码时，可以通过 VGG 直接还原出完全一致的样式和布局。对于按钮的居中对齐，开发者可以使用 VGG 提供的 Flexbox 或 Grid 布局系统，通过设置相应的属性（如 justify-content 和 align-items）来实现水平和垂直居中。

此外，VGG Specs 还提供了一些其他属性，帮助开发者更精确地控制间距、边距和尺寸，确保实现的布局与设计稿中的效果一致。通过 VGG，开发者可以确保每个元素的样式和布局在不同的设备和屏幕尺寸上都能保持一致性和响应性，从而提供高质量的用户体验。

通过 VGG 完美还原的按钮样式

通过 VGG 还原的 Button 布局完整代码

我们必须承认，CSS 作为网页设计和开发中的核心语言，拥有非常强大的样式和布局能力。然而，与此强大功能相伴的，是相对较为高昂的学习成本。CSS 的语法规则、属性和值众多，且存在各种特殊情况和边缘案例，这使得初学者和非专业开发者在掌握 CSS 时可能会感到困难。

VGG Specs 旨在提供一个更为易用的解决方案。VGG Specs 通过简化的语法和直观的 API（之后将由 VGG Runtime 提供），降低了学习门槛，使得开发者可以更快地上手并实现布局。

与 SVG 相比，SVG 虽然在矢量图形的创建和显示方面得到青睐，但在布局能力上并不完善。SVG 缺乏类似 CSS Flexbox 和 Grid 这样的现代布局系统，这限制了它在复杂界面设计中的应用。而 VGG Specs 则在这方面进行了补充和完善，它不仅支持矢量图形的所有特性，还提供了一整套布局解决方案，使得开发者可以轻松实现复杂的界面布局，无需担心 SVG 的局限。

VGG Specs 的设计理念是将易用性和强大功能相结合，为开发者提供一个既简单又强大的工具。同时，VGG Specs 也为设计师和开发者之间的协作提供了便利，使得从设计到实现的过程更加流畅和高效。

我们期待看到一个更加高效和友好的开发环境，让开发者可以更加轻松地构建出既美观又实用的网页和应用。

此外，VGG 开源了底层引擎 VGG 运行时，具有跨平台渲染和运行能力。我们后续会出一系列内容讨论 SVG 作为矢量图形存在的问题，并展示 VGG 的图形能力以及相比于 SVG 的优点。请持续关注，也 欢迎大家一起参与 VGG 开源社区的建设～

👏扫码添加小助手进交流群，欢迎社区小伙伴参与共建

参考：

https://grumpy.website/938

https://tonsky.me/blog/centering/

https://youtu.be/_-6LgEjEyzE?t=2291

https://web.dev/blog/align-content-block

https://habr.com/ru/companies/ruvds/articles/810311/

https://mp.weixin.qq.com/s/1tLk9PDPByA6zNdbQ4eGOQ

https://aelaschool.com/en/visualdesign/alignment-ui-invisible-structure-behind-designs/

预告：5月份会发布基于 VGG 的商业化产品 Daruma Plugin for Figma。 欢迎对 Design as Code 感兴趣的小伙伴报名内测，有机会获得社区大礼包，数量有限，先到先得。(添加小助手回复“内测”即可报名)
🔥 社区活动： Design as Code｜VGG 社区邀你参加开源之夏，赢万元奖金

关于 VGG

VGG（VeryGoodGraphics）是新一代跨平台应用开发解决方案。VGG 倡导 Design-as-Code 的理念，让开发者可直接基于设计稿编程，快速将设计原型交付为可交互的应用。
特性一：无代码完美还原设计稿
VGG 自研的开源图形引擎能渲染出高保真设计稿中的任意细节，可直接将设计稿作为用户界面，省去前端与客户端开发者使用代码去复原设计稿的开发工作，降低他们与设计师之间的沟通摩擦成本。

特性二：原生跨平台、嵌入式支持已有开发框架
VGG 通过完全或者部分嵌入的方式，支持在任意一种已有的 APP 基础上进行增量式开发，主持主流平台与框架。

特性三：脚本与 WebAssembly 支持
VGG 还同时支持平台无关的 JS 脚本与 WebAssembly 模块，在提供快速业务逻辑开发能力的同时支持高性能计算。

特性四：高度的生态兼容性
VGG 提供的 SaaS 服务目前已实现对主流设计生态的兼容（Figma/Sketch/Adobe Illustrator），并提供 Figma 插件帮助设计稿快速同步。将来还计划为开发者提供开发辅助工具，打通从应用 UI 设计到应用研发的完整流程。

GitHub: https://github.com/verygoodgraphics
官网: https://verygoodgraphics.com
博客: https://blog.verygoodgraphics.com
Discord: https://discord.com/invite/89fFapjfgM
Twitter: https://twitter.com/VGG_Design

微信关注我们

原文链接：https://my.oschina.net/VGG/blog/11184838

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

一文了解微服务

原文作者：NGINX 原文链接：一文了解微服务转载来源：NGINX 中文官网 NGINX 唯一中文官方社区，尽在nginx.org.cn 微服务是一种使用多个小组件构建复杂应用的方法。本文介绍了它的工作原理、优缺点及其可带来的优势。什么是微服务？微服务是一种利用多个小组件（每个组件执行一种功能，例如身份验证、通知或支付处理）构建大型复杂应用的软件架构方法。每个微服务都是软件开发项目中的一个独立单元，具有自己的代码库、基础设施和数据库。微服务协同工作，通过 Web API 或消息队列进行通信，以对传入事件作出响应。简化的微服务架构关于微服务的视频什么是微服务？ NGINX Plus 助力 BuzzFeed 迁移至微服务点击此处观看详细讲解视频>> 为何采用微服务架构？在传统单体架构中，一个应用的所有功能均在单个代码库中实现。这种方法有几个弊端：随着应用日趋复杂，任何一位开发人员都很难弄清整个代码库。新入职的开发人员也很难上手。一个解决办法是将不同的功能模块分配给不同的开发人员或团队。这样开发人员可以更轻松地掌控自己的代码，但问题是会更难跟踪与其他模块的...

2024-05-22

236

NGINX 向云原生演进，All inOpenNJet 概述 OpenNJet KIC(Kubernetes Ingress Controller)基于OpenNJet proxy的动态特性、高性能实现。弥补nginx 在云原生场景中应用的不足。提供了丰富的流量管理能力，如动态location、host/path路由、负载均衡、动态upstream、金丝雀发布、TLS Termination/SNI、TCP/UDP、WebSocket等。本版本主要特性：支持分片处理Ingress/VS CR 支持与ADC集成支持HTTP头操作支持TCP代理支持跨namespace 支持WebSocket代理支持UDP代理支持动态NJet VS/Accesslog 支持TCP主动健康检查支持动态worker 进程数调整本文简要介绍了这些新功能。架构图如下：新特性概览分片处理Ingress/VS CR 针对不同的Ingress/VS资源有专门的kic来处理，这就是KIC分片机制。不同的Ingress/VS资源由ingressClass标识，Ingress资源可以通过注解kuber...

2024-05-22

263

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。