Curry_On的博客

本文记录四种在CSS中常见的，实现水平垂直居中的方式，这些知识属于偏记忆性的东西，经常写就不会忘，隔一段时间没看的话有时候就想不起细节了。所以，本文的主要目的还是做记录，方便忘记时回顾复习。首先，我们应该考虑的是要实现垂直居中的元素，它是行内元素，还是块级元素。对于行内元素来说，实现方式就比较简单了：水平居中用`text-align: center`；垂直居中把`line-height`的值设置为 `height` 的值行了。下面主要来写一下对于块级元素的垂直居中实现方式

如果对于 line-height，font-size，行间距，行内文本框之间的关系不是很清楚，不妨仔细看看下面这张图。总结一下：line-height：代表的是文本基线之间的距离，对应上图中红色框的高度行间距：可由公式行间距 = line-height - font-size 计算行内框：文本行中的每一个元素都会生成行内框，就是图中的棕色框框，除去文字内容外，棕色框框的顶部和底部也许会有高度，是否会有高度，取决于是否有行间距，行间距的一半就是棕色框框顶部或底部的高度。看到这里，对于四者之间的