Html 标记内img（svg）的垂直中心

所以我想垂直居中配置按钮（#config），我尝试了太多的选项，但没有一个是我想要和理解的。这是我的密码笔：

这是要修改的代码中最重要的部分：

HTML

---

提前谢谢！如果你看到别的东西，请不要告诉我

如果您添加了一个新行

#config{
  margin-top: 15px;
}

---

如果你用这个加一个新行

#config{
  margin-top: 15px;
}

---

移除浮动并使用

显示：内联块

和

垂直对齐：中间

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体，
html{
字体系列：“Roboto”，无衬线；
身高：100%；
溢出y：隐藏；
}
a{
文字装饰：无；
}
#卡贝塞拉{
文本对齐：右对齐；
页边距顶部：50px；/*仅用于演示*/
}
#卡贝塞拉，
a{
颜色：#FFFFFF；
}
#卡贝塞拉{
背景色：#393E46；
线高：50px；
高度：50px；
}
#卡贝塞拉*{
保证金：0px 4px 0px 4px；
}
#用户，
#配置{
显示：内联块；
垂直对齐：中间对齐；
}
#标志{
高度：50px；
宽度：55px；
浮动：左；
}
#配置{
过渡：所有0.5s缓解；
高度：20px；
宽度：20px；
}
#配置：悬停{
变换：旋转（90度）；
}
#使用者{
字号：100；
字号：18px；
}

用户名

移除浮动并使用

显示：内联块

和

垂直对齐：中间

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体，
html{
字体系列：“Roboto”，无衬线；
身高：100%；
溢出y：隐藏；
}
a{
文字装饰：无；
}
#卡贝塞拉{
文本对齐：右对齐；
页边距顶部：50px；/*仅用于演示*/
}
#卡贝塞拉，
a{
颜色：#FFFFFF；
}
#卡贝塞拉{
背景色：#393E46；
线高：50px；
高度：50px；
}
#卡贝塞拉*{
保证金：0px 4px 0px 4px；
}
#用户，
#配置{
显示：内联块；
垂直对齐：中间对齐；
}
#标志{
高度：50px；
宽度：55px；
浮动：左；
}
#配置{
过渡：所有0.5s缓解；
高度：20px；
宽度：20px；
}
#配置：悬停{
变换：旋转（90度）；
}
#使用者{
字号：100；
字号：18px；
}

用户名

将任何内容置于中心位置：

.wrapper
{
    position: relative;
}

.content
{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

删除不需要的方向

---

---

工作原理：上/左百分比定位作用于父元素的大小，导致内部元素的左上角移动到父元素的中心。要使元素真正居中，您必须变换：将元素平移-50%，这取决于元素本身的大小，从而形成一个完美的居中，几乎可以居中：

.wrapper
{
    position: relative;
}

.content
{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

删除不需要的方向

---

---

工作原理：上/左百分比定位作用于父元素的大小，导致内部元素的左上角移动到父元素的中心。要使元素真正居中，您必须将元素转换为-50%，这取决于元素本身的大小，从而形成一个完美的中心

是的，我试过了，效果很好！但是，难道没有一种方法可以使所有东西垂直居中吗？或者为什么#配置没有居中？多谢各位！是的，我试过了，效果很好！但是，难道没有一种方法可以使所有东西垂直居中吗？或者为什么#配置没有居中？多谢各位！伟大的这是我尝试过的更精确的解决方案之一，但当我想使用带有变换比例的悬停或在#config中旋转时，例如，它“工作得不太好”。关于如何使其工作有何想法？当然，只需将鼠标悬停设置为

transform:translate（-50%，-50%）rotate（90度）

，就可以组合变换属性。唯一的问题是，您（目前）无法在多行/类/文件上组合

转换
属性值，因此您必须按照悬停选择器中的说明定义属性值（这会降低可重用性）。太好了！这是我尝试过的更精确的解决方案之一，但当我想使用带有变换比例的悬停或在#config中旋转时，例如，它“工作得不太好”。关于如何使其工作有何想法？当然，只需将鼠标悬停设置为
transform:translate（-50%，-50%）rotate（90度）
，就可以组合变换属性。唯一的问题是，您（当前）无法在多行/类/文件上组合
变换
属性值，因此您必须按照悬停选择器中的说明进行定义（这会降低可重用性）