For centering display, we all know what to do, it’s so simple:
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
If you wish, you can also use grid:
display: grid;
justify-items: center; /* Horizontally center */
align-items: center; /* Vertically center */
We can start from this basic principle, even ChatGPT knows how to center an element: Alright, maybe a bit slow, but can eventually do it. Everyone knows how to center an element, it’s a piece of cake. However, if we look at the actual application, we find that these methods are not widely used. Indeed, there seems to be something lost between theory and practice.
Font might be the main culprit of centering problems. Unaligned text can be found everywhere. In fact, many renowned companies, regardless of size, have failed to avoid the issue of text centering, including Apple, Microsoft, GitHub, Valve, Slack, Telegram, Google Maps, and others.
Line height is another significant factor affecting perfect centering. Line height is a complex issue, Vincent De Oliveira had a thorough discussion about it, for instance, in Slack, Notion, Airbnb, and YouTube, we can see the effect of line height on text centering.
Aligning two elements located in different containers is nearly an impossible task. Many have tried, but only a few have succeeded. CSS might be a barrier, different controls have different defaults, and you must override them before attempting to align. Unfortunately, there is no simple way, only a makeshift solution bit by bit.
Icons and text alignment is also a challenge, as icons are like small rectangles lined up with the text, therefore all the problems caused by text and line height are also present here.
It is well known that aligning text with icons is a technical challenge. Whether it’s Twitter’s atom symbol, Mozilla’s icon on iOS platform, or YouTube’s logo, this task is always tricky.
Sometimes, icons can be higher than texts; and at other times, texts may exceed above the icons; in some cases, it seems that neither can be perfectly centered. Some icons are basic HTML form controls, while others might be designed with artistic effects.
Even though they can be perfectly aligned driven by creativity, the whole process is often filled with helplessness. CSS’s help is also limited in this respect. Although the vertical-align property offers 13 possible values, none can effectively solve this problem. text-align: middle is the closest solution, but because it aligns according to x-height instead of cap-height, the visual effect is still unsatisfactory.
This is exactly why people have mixed feelings about web programming: it is always full of challenges. Aligning icons as rectangles is relatively simple, but aligning text is fraught with difficulties. If we embed icons into font files, the problem becomes even more complex: we cannot guarantee the consistency of each icon. With the popularity of icon fonts, despite many disadvantages and few advantages, many companies still rush to promote their use.
There are numerous examples, like when macOS upgraded from 10.14 to 10.15, the vertical alignment of the operators became imprecise, and icons also appeared blurry. Apple’s persistence in icon fonts even affected the design of the QuickTime record button, and to this day, it remains unsatisfactory. Similar problems have also appeared in the Calculator application, among many others.
Icon alignment is not just a technical issue; designers are also facing challenges. Considerations must also be made for the shape of icons, especially challenging when dealing with non-rectangular icons like triangles, which may be too far to the left, too far to the right, or positioned too high due to improper line-height settings.
You might think that only vertical centering is so difficult, but that’s not the case; horizontal centering has just as many challenges. Many problems stem from a lack of meticulousness and rigor during design and implementation.
So, where exactly is the problem? Ultimately, the core issue lies in font handling. When attempting to align text by centering a text block’s bounding box, even if the rectangle is perfectly centered, the text is likely to be offset.
Despite this, even if font parameters allow for imbalance, the ultimate alignment effect still depends on the precision of the implementation. Therefore, in the world of web design and development, the alignment of text and icons is often a test of skills, whether for programmers or designers.
In practice, we find that most popular font designs have some degree of imbalance, some even significantly. For instance, the height of letter caps occupying 10% is not a small proportion—in a 13-point font size, this ratio could equal the size of one pixel. If it’s magnified twice, this imbalance becomes very noticeable.
Specifically, the Segoe UI font is the reason why Github does not display centered on Windows systems. However, the solution to this problem is relatively simple: by adjusting the bounding box to align the text in the center, the problem can be easily solved. If you are using a design tool like Figma, you can manually make such adjustments, although it is not the default setting.
For font designers: If you are a font designer, it’s advised to follow this principle when setting font parameters: make the ascender minus the cap-height equal to the descender. This will visually achieve the effect mentioned above. It’s important to note that you do not need to extend ascenders/descenders to the extreme boundaries; as demonstrated above, consistency in the parameters mentioned is all that is needed. Whether you are involved in web development or native app development, to avoid display issues, please make sure the fonts used conform to this rule. Fonts like SF Pro Text, Inter, and Martian Mono seem to have met this requirement, so using these fonts means you don’t need to perform any additional operations to achieve perfect text centering.
For Web developers: From the perspective of web development, dealing with the above issue is somewhat complicated. First, you need to be clear about what font you are using. If you plan to change the font, this method may not work. Taking IBM Plex Sans as an example, its font parameters are as follows: when you set font-size, you are actually setting the UPM (unit per em, which is also equal to 1em). However, the space occupied by the text block is determined by the space between the ascender and descender. By simple calculation, adding padding-bottom: 0.052em can result in the desired centered effect.
To see specific font parameters (such as ascender, descender, sCapHeight), you can refer to the respective font documentation. After finding the solution, aligning icons also becomes no longer difficult. You just need to set vertical-align to baseline, and then move the icon down by (iconHeight – capHeight) / 2 to achieve alignment. Unfortunately, to accomplish this, you need to be conversant with both font parameters and the dimensions of the icon, but at least this method is effective.
For icon fonts: It is recommended not to use font icons anymore; instead, turn to using regular image formats. To illustrate more vividly, I have made a schematic diagram that shows the difficulties encountered by Apple in trying to embed a check mark within a rectangle and attempting to align this rectangle alongside a text label. Although such a task seems quite straightforward, in practice, there are still cases of alignment failure. Clearly, sometimes aligning two rectangles might not be as easy as we imagine.
Nothing is more difficult than trying to align text that is surrounded by an arbitrary amount of whitespace. It’s a game we cannot win. For normal human beings, center-aligning text is indeed a complex and painful process, which not only tests our patience, but also challenges our professional skills.
As software developers, we can only achieve perfect alignment of elements within a graphical interface through precise calculation. For those irregular or manually adjustable elements, we usually place them within a sufficiently large container and strive to achieve a visual balance within that container. This means that we need to handle these elements more carefully to ensure their harmonious unity.
All professionals engaged in design and development, please note: For user interface (UI) design, poor center alignment can completely destroy the effect of an otherwise well-designed interface; on the contrary, if done just right, text alignment can make the user experience poetic and picturesque.
We must admit that although the process may be fraught with difficulties, even if there are no ready-made tools available for direct use, and even if it may take a great deal of time to explore and try different solutions, I firmly believe that through our collective efforts, we will eventually find a design approach that both keeps the elements visually neat and avoids potential chaos.
Personally, I long to live in a world of UI that is full of aesthetics and balance. I believe you share the same wish. After all, all the hard work and the effort to find solutions will prove to be worthwhile and meaningful when we create a more exquisite and efficient user interface.
