【CSS】上下居中对齐实际上无法实现吧？

vertical-align中有top,middle,baseline,bottom。
请看下面的line-height模型中的四条线。

图片描述

从几何上看，这个line-height模型的几何中线在 middle line 和base line中间，
middle line 偏上；base line 偏下。
vertical-align 无论参照什么对齐，都无法居于几何中心对齐。
只能说容器高度越低，偏差越小，肉眼越无法分辨。

我的理解正确吗？
另外，当我们使用display:flex;align-items:center; 让子容器居中的时候，是参照几何中心线居中，还是base line?

回答：

可以这么理解，但是还是可以居中对齐的
css-deep-understand-vertical-align-and-line-height/" rel="nofollow">http://www.zhangxinxu.com/wor...

回答：

如果只是说vertical-align的对齐，确实很难做到绝对上下居中。你用的图可能有点不准确，css规范中的vertical-align:middle的对齐线是小写x的中线，如果不是什么奇葩字体的话，就是那个交叉点所在的线。又因为像大写字母或者汉字的高度是比小写x高的，所以理论上说，这根对齐线通常比绝对居中线的位置还要低一些，你图里的中线应该往下更靠近基线，而不是在顶线和基线中间。
另外，vertical-align和line-height密切相关，了解更多推荐去看张鑫旭的一片文章http://www.zhangxinxu.com/wor...，说的非常直白。

至于align-items:center，这个是几何中线对齐。baseline只有在inline和inline-block里存在，并且据我所知只有vertical-align会用到。

回答：

vertical-align的目的是文字对齐，flex是盒子本身的对齐

对于文字，追求严格的垂直居中感觉不是很有意义: 首先文字们的高度就已经不一致了。

回答：

一般上线对齐还是用的 padding-top 或者 padding-bottom 模拟居中

vertical-align是文字对齐,在div中测试无效

<html>
<head>
<style type="text/css">
#fff {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<div id="fff">ddd</div>
</body>
</html>

以上是 【CSS】上下居中对齐实际上无法实现吧？ 的全部内容， 来源链接： utcz.com/a/155716.html

回到顶部