Html CSS垂直对齐技巧，父对象不使用子div中的百分比img图像

正如我发现的，对于垂直对齐，浏览器友好的最佳解决方案是使用伪元素的技巧。但如果我需要在另一个div中使用图像的百分比，它就不起作用了

由于响应性设计，我需要使用百分比

我意识到问题可能是由伪元素的“宽度”引起的，因为当我将子元素的宽度更改为99%时，它会跳回到应该的位置，但是为什么这是必要的呢？我不想使用99%，因为这可能会导致问题（当缩小浏览器窗口时，它最终必须更改为98%，97%…），并且图像不接触其父元素的侧面。有人知道原因吗？谢谢

html，正文{
身高：100%；
宽度：100%；
边际：0px；
填充：0px；
}
.家长{
宽度：100%；
身高：100%；
}
.parent:在{
内容：“；
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
.儿童{
显示：内联块；
身高：25%；
宽度：100%；
}
img{
宽度：100%；
身高：100%；
}

---

是。在放置：before伪元素时，它正好位于内容的开头，也就是说，在任何空格之前。所以你的水平布局是

before-pseudo   single-collapsed-Space      img
 Zero width     4px (from the font size)    100% of container

太大了。使用

左边距：-4px

请参见是。在放置：before伪元素时，它正好位于内容的开头，也就是说，在任何空格之前。所以你的水平布局是

before-pseudo   single-collapsed-Space      img
 Zero width     4px (from the font size)    100% of container

太大了。使用
左边距：-4px

请看
我将提出我自己的解决方案，这是我之前神秘地没有看到的。这是大多数专业网站设计师使用的解决方案。也就是说，删除使用
display:inline block
样式的标记之间的空格/换行符

重要注意事项：当应用
时：在某个父元素（例如
.parent
）上的
伪元素之前，CSS将直接在节点
.parent
的第一个子元素“之前”追加此新的伪元素。这意味着如果
.parent
的第一个子元素与开头的
.parent
标记之间用一个新的段落字符或空格隔开，那么这个空白字符也将位于新附加的伪元素之前。因此，当使用
display:inline block
时，空格字符也会影响CSS的伪元素

如果您有权访问HTML文件，解决方案是：

.parent
的第一个子项必须紧跟在
.parent
的开始标记之后，如@denisheremet所建议的那样
在真实DOM中生成真实元素而不是“伪”元素：

<div style="display: inline-block; height: 100%; vertical-align: middle"></div><
div class="child">

<
div class=“child”>

或者更优雅地使用注释：

<div style="display: inline-block; height: 100%; vertical-align: middle"></div><!--
--><div class="child">



如果您只能访问CSS，那么到目前为止，我知道的唯一其他选择是@Alohci建议的解决方案，即使用负边距删除默认字体宽度为4px的空白

我将提出我自己的解决方案，这是我之前神秘地没有看到的。这是大多数专业网站设计师使用的解决方案。也就是说，删除使用
display:inline block
样式的标记之间的空格/换行符

重要注意事项：当应用
时：在某个父元素（例如
.parent
）上的
伪元素之前，CSS将直接在节点
.parent
的第一个子元素“之前”追加此新的伪元素。这意味着如果
.parent
的第一个子元素与开头的
.parent
标记之间用一个新的段落字符或空格隔开，那么这个空白字符也将位于新附加的伪元素之前。因此，当使用
display:inline block
时，空格字符也会影响CSS的伪元素

如果您有权访问HTML文件，解决方案是：

.parent
的第一个子项必须紧跟在
.parent
的开始标记之后，如@denisheremet所建议的那样
在真实DOM中生成真实元素而不是“伪”元素：

<div style="display: inline-block; height: 100%; vertical-align: middle"></div><
div class="child">

<
div class=“child”>

或者更优雅地使用注释：

<div style="display: inline-block; height: 100%; vertical-align: middle"></div><!--
--><div class="child">



如果您只能访问CSS，那么到目前为止，我知道的唯一其他选择是@Alohci建议的解决方案，即使用负边距删除默认字体宽度为4px的空白

我在评论中提到了这一点，但似乎我应该给出答案


诀窍是删除
父级
和
子级
div之间的所有空格，因此
：before
和
子级
之间没有空格。另外，您还应该记得将
垂直对齐
添加到
子项
我在评论中提到过，但似乎我应该提供它作为答案


诀窍是删除
父级
和
子级
div之间的所有空格，因此
：before
和
子级
之间没有空格。另外，您还应该记住将
垂直对齐
添加到
子对象
您能解释一下您想要实现的结果吗？我希望带有图像（
.child
）的div在父对象（
.parent
）内垂直对齐元素。你的意思是在父元素的中心？你能解释一下你想要达到的结果吗？我希望带有图像（
.child
）的div在父元素（
.parent
）内垂直对齐。你的意思是在父元素的中心？为什么这么复杂？您可以跳过img前面的空格tag@DenisSheremet-我不明白。你能提供吗