本文旨在提供一种可靠的 CSS 方法，用于在圆形容器中实现文本的垂直居中。通过移除 padding-bottom 属性，并利用 aspect-ratio 或伪元素模拟宽高比，可以轻松解决文本垂直居中问题，并提供兼容性方案。本文将详细介绍实现原理和具体代码示例。
在网页设计中，经常需要在圆形或其他特定形状的容器内垂直居中显示文本。传统的 vertical-align 属性在 block 元素上并不总是有效，而使用 transform 进行偏移可能会引入不精确性。本文将介绍一种更简洁、更可靠的解决方案，利用 aspect-ratio 属性或伪元素来维持圆形容器的宽高比，并结合 Flexbox 实现文本的垂直居中。
移除 padding-bottom 的影响
原始代码中使用 padding-bottom 来创建正方形区域，进而通过 border-radius 实现圆形。然而，padding-bottom 的存在会干扰文本的垂直居中。因此，首先需要移除 padding-bottom 属性。
使用 aspect-ratio 属性
aspect-ratio 属性允许我们指定元素的宽高比。对于圆形，我们希望宽高相等，因此可以设置 aspect-ratio: 1/1;。
立即学习“前端免费学习笔记（深入）”；
.grid-item {
text-decoration: none;
overflow: hidden;
width: 48%;
/* padding-bottom: 48%; Remove this line */
aspect-ratio: 1/1; /* Add this line */
background-color: rgba(124124, 139, 224, 0.8);
border-radius: 50%;
float: left;
margin: 1%;
margin-top: -4%;
color: black;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}这段代码通过设置 aspect-ratio: 1/1 确保了 .grid-item 始终保持正方形，从而配合 border-radius: 50% 实现圆形效果，同时 Flexbox 的 align-items: center 和 justify-content: center 保证了文本的垂直和水平居中。
兼容性方案：使用伪元素
如果需要兼容不支持 aspect-ratio 属性的浏览器，可以使用伪元素 ::after 来模拟宽高比。
.grid-item {
text-decoration: none;
overflow: hidden;
width: 48%;
background-color: rgba(124124, 139, 224, 0.8);
border-radius: 50%;
float: left;
margin: 1%;
margin-top: -4%;
color: black;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative; /* Add this line */
}
.grid-item::after {
content: "";
display: block;
padding-bottom: 100%;
}注意：
- 需要为 .grid-item 添加 position: relative;，以便 ::after 伪元素相对于 .grid-item 定位。
- padding-bottom: 100% 使伪元素的高度等于父元素的宽度，从而模拟了 1:1 的宽高比。
- 这种方法依赖于 padding-bottom 相对于元素宽度的百分比计算方式。
完整代码示例
以下是结合 aspect-ratio 和 Flexbox 的完整 CSS 代码示例：
.grid {
width: 100%;
max-width: 500px;
margin: 0 auto;
background: #CCC;
}
.grid::after {
content: "";
display: block;
clear: both;
}
.grid-item {
text-decoration: none;
overflow: hidden;
width: 48%;
aspect-ratio: 1/1; /* Use aspect-ratio */
background-color: rgba(124124, 139, 224, 0.8);
border-radius: 50%;
float: left;
margin: 1%;
margin-top: -4%;
color: black;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.grid-item > span {
color: black;
text-align: center;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2) {
margin-top: 1%;
}
.grid-item:nth-child(3n + 3) {
margin-left: 25%;
}
.grid-item:nth-child(3n + 4) {
clear: left;
}或者，使用伪元素实现兼容性：
.grid {
width: 100%;
max-width: 500px;
margin: 0 auto;
background: #CCC;
}
.grid::after {
content: "";
display: block;
clear: both;
}
.grid-item {
text-decoration: none;
overflow: hidden;
width: 48%;
/* aspect-ratio: 1/1; Remove aspect-ratio */
background-color: rgba(124124, 139, 224, 0.8);
border-radius: 50%;
float: left;
margin: 1%;
margin-top: -4%;
color: black;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative; /* Add position: relative */
}
.grid-item::after {
content: "";
display: block;
padding-bottom: 100%; /* Add padding-bottom */
}
.grid-item > span {
color: black;
text-align: center;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2) {
margin-top: 1%;
}
.grid-item:nth-child(3n + 3) {
margin-left: 25%;
}
.grid-item:nth-child(3n + 4) {
clear: left;
}总结
本文介绍了使用 CSS 在圆形容器中垂直居中文本的两种方法：使用 aspect-ratio 属性和使用伪元素。 aspect-ratio 属性是更简洁的现代方法，而伪元素方法提供了更好的浏览器兼容性。选择哪种方法取决于您的项目需求和目标浏览器。通过结合这些技巧和 Flexbox，可以轻松实现各种形状容器内的文本垂直居中。
