推特点开图片之后让图片完全居中在屏幕中间的原理是啥

泻药。这里用到了 行高的概念,一个 inline block 把行撑开,然后把垂直对齐设为居中。在实现内容居中的几种方式里,这算是对老旧浏览器兼容性比较好的一种了。但这些都是利用了 typography 来做 layout 的 trick,了解一下得了,不值得提倡,布局要用布局的方法。
■网友
【推特点开图片之后让图片完全居中在屏幕中间的原理是啥】 推特点开图片之后让图片完全居中在屏幕中间的原理是啥

vertical-align 设置只对 inline 和 inline-block 的元素有效。另外,vertical-align 只规定内部元素如何对齐,不管内部元素和其父元素是否对齐使用伪元素的原因是为了让该伪元素的垂直中点和其父元素的垂直中点在同一水平线上使用vertical-align:middle 是为了让该伪元素元素的兄弟节点的垂直中点与该伪元素的垂直中点在同一水平线上。


    推荐阅读