问题是什么：
SVG和文本都不会将自己定位在我的跨度中间。
我试过的
我尝试过更改显示模式，使用边距对齐项目，文本对齐。尝试使用来自stackexchange的解决方案，但没有一个起作用。
JSFIDDLE
.knowledge-container {
margin: auto;
margin-top: 3vh;
width: 95%;
padding: 5px;
text-align: center;
}
.knowledge-box {
margin: 5px 0.5vw 0px 0.5vw;
height: 10vw;
width: 10vw;
border: 4px solid white;
border-radius: 15px;
background-color: none;
display: inline-block;
overflow: hidden;
}
.knowledge {
width: 100%;
height: 100%;
}
.knowledge span {
display: block;
}
.knowledge-box #topic-logo {
height: 85%;
width: auto;
background-color: pink;
}
.knowledge-box #topic-desc {
height: 15%;
width: auto;
text-transform: uppercase;
font-size: 100%;
background-color: violet;
}
.knowledge svg {
fill: white;
width: auto;
height: 90%;
width: auto;
margin: auto;
padding-top: 15px;
}<div class="knowledge-container">
<div class="knowledge-box">
<div class="knowledge">
<span id="topic-logo"><svg></svg></span>
<span id="topic-desc">Language</span>
</div>
</div>
</div>最佳答案
您可以使用top和transform: translateY()解决您的问题。如果您不熟悉transform和translate，请分别阅读here和here。
从MDN文档中：
translate() CSS函数在平面上移动元素的位置。此变换的特征是向量，向量的坐标定义了向量在每个方向上的移动量。
解
看看这个updated fiddle。
将以下css属性添加到您的<svg>：
.knowledge svg {
...
top: 50%;
position: relative;
transform: translateY(-50%);
}
对于您的
topic-desc，在其中添加另一个<span>并添加相同的规则：.knowledge span span {
position: relative;
top: 50%;
transform: translateY(-50%);
}
演示版
您可以通过运行以下演示查看结果。
.knowledge-container {
margin: auto;
margin-top: 3vh;
width: 95%;
padding: 5px;
text-align: center;
}
.knowledge-box {
margin: 5px 0.5vw 0px 0.5vw;
height: 30vw;
width: 30vw;
border: 4px solid white;
border-radius: 15px;
background-color: none;
display: inline-block;
overflow: hidden;
}
.knowledge {
width: 100%;
height: 100%;
}
.knowledge span {
display: block;
}
.knowledge span span {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.knowledge-box #topic-logo {
height: 85%;
width: auto;
background-color: pink;
}
.knowledge-box #topic-desc {
height: 15%;
width: auto;
text-transform: uppercase;
font-size: 100%;
background-color: violet;
}
.knowledge svg {
fill: white;
width: auto;
height: 90%;
width: auto;
margin: auto;
top: 50%;
position: relative;
transform: translateY(-50%);
}<div class="knowledge-container">
<div class="knowledge-box">
<div class="knowledge">
<span id="topic-logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 990 990"><title>Brain</title><path d="M489,124c0-32-13-61-36-83A123,123,0,0,0,368,6h0C301,6,249,57,246,120l-25,5c-58,18-91,75-79,131-15,5-26,14-34,27s-12,47,3,66c-45,17-78,60-78,110a111,111,0,0,0,20,64C24,540,5,569,5,602s26,74,65,87c-7,8-13,15-17,26s-9,42-1,64,45,52,79,52h13a96,96,0,0,0,26,61c20,22,46,34,77,37h17c19,41,60,68,107,68,64,0,115-48,116-110h0V125c1,0,1,0,1-1h0ZM373,968a93,93,0,0,1-81-47c41-14,73-50,77-94,0-8-5-13-12-14s-13,5-15,11c-4,46-45,79-91,77a84,84,0,0,1-58-28c-15-17-23-38-20-60h0c0-3,0-4-1-6s-11-10-17-8c-30,11-65-3-77-32a61,61,0,0,1,0-43q10-21,32-31c7-3,11-10,8-17a15,15,0,0,0-13-8h-3c-38,0-69-29-69-66s30-66,69-66c8,0,13-5,13-13s-5-13-13-13a86,86,0,0,0-25,4,88,88,0,0,1-19-54c0-51,42-92,95-92s95,41,95,92c0,8,5,13,13,13s13-5,13-13c0-65-54-117-122-117H137a1,1,0,0,0-1-1c-13-11-16-31-7-46a38,38,0,0,1,53-13c7,4,15,1,19-5s1-14-5-18-19-8-28-8c-11-45,16-89,61-103,15-4,29-5,42-3,24,4,45,17,58,36,4,6,12,8,19,3s8-11,3-18c-17-24-45-41-75-46h-4c1-50,44-89,95-89h0c25,0,49,10,67,27a89,89,0,0,1,28,65h0V293H350s-24,3-38-10-13-20-13-37-5-13-13-13-13,5-13,13c0,24,8,43,23,56s40,17,52,17H463V422H361c-8,0-13,5-13,13s5,13,13,13H463V560H252s-24,3-38-10-13-20-13-37-5-13-13-13-13,5-13,13c0,24,8,43,23,56s40,17,52,17H464V691H313c-5,0-37-3-58,17s-23,32-23,56c0,8,5,13,13,13s13-5,13-13,4-29,13-37,38-10,38-10H462V881C463,930,422,968,373,968Z" transform="translate(-5 -5)"/><path d="M995,602c0-33-19-63-46-79a111,111,0,0,0,20-64c0-50-32-92-78-110,13-19,16-46,3-66s-21-23-34-27c12-56-21-114-79-131l-25-5c-1-31-13-59-36-80A123,123,0,0,0,632,5h0C565,5,511,57,511,122h0V883h0c1,61,53,110,116,110,46,0,89-27,107-68h17c30-3,57-15,77-37s25-40,26-61h13c34,0,66-19,79-52s5-65-19-88C967,676,995,642,995,602Zm-97,66h-3a15,15,0,0,0-13,8c-3,6,0,14,8,17,30,11,45,45,33,74s-46,43-77,32c-7-3-15,0-17,8s-1,4-1,6h0c1,22-5,43-20,60a84,84,0,0,1-58,28c-48,4-89-31-91-77,0-8-7-13-15-11s-13,6-12,14c4,45,34,80,77,94-15,29-46,47-81,47-50,0-90-40-90-87V717H689s24-3,38,10,13,20,13,37,5,13,13,13,13-5,13-13c0-24-8-43-22-56s-53-17-58-17H537V583H753c12,0,34-3,52-17s22-32,22-56c0-8-5-13-13-13s-13,5-13,13-4,29-13,37-38,10-38,10H538V445H640c8,0,13-5,13-13s-5-13-13-13H538V316H654c12,0,34-3,52-17s22-32,22-56c0-8-5-13-13-13s-13,5-13,13-4,29-13,37-38,10-38,10H538V125h0c0-51,42-92,95-92h0c25,0,49,9,68,27s28,38,28,63h-4c-30,5-58,22-75,46-4,6-3,14,3,18s15,3,19-3c13-19,36-32,58-36a94,94,0,0,1,42,3c22,8,42,23,53,43s13,40,8,60a113,113,0,0,0-28,8c-7,4-8,11-5,18s12,8,19,5c19-10,42-4,53,13s7,34-7,46a1,1,0,0,1-1,1H847c-67,0-122,52-122,117,0,8,5,13,13,13s13-5,13-13c0-51,42-92,95-92s95,41,95,92a88,88,0,0,1-19,54,80,80,0,0,0-25-4c-8,0-13,5-13,13s5,13,13,13c38,0,69,29,69,66S937,668,898,668Z" transform="translate(-5 -5)"/> </svg></span>
<span id="topic-desc"><span>Language</span></span>
</div>
</div>
</div>关于html - 如何在跨度中间将这些元素居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43886098/