日常记要 之 自定义下拉框div内文字垂直方向居中

        （本篇文章是第一次记录，之前遇到的情况暂时没有做记录，以后再遇到将会回来更新；当然，如果你遇到相同的问题，可以留言告诉我，我们一起讨论进步）

        最近在重构公司的下拉框控件，重构的一个原因是之前一开始考虑的情况比较复杂，导致在做的过程中，代码的可读性差、结构耦合程度比较高，优化也比较困难，于是打算遵从“从一而简”的原则，构建整体的耦合度较低的下拉控件出来，以后需要便于扩展。

        期间，遇到的一个一直以来蛋疼但是都没有去整理的问题，就是如题了。

        我们在div这样的块元素或者span这种加了“display:block/inline-block;”的行内变块的元素之后，想要直接在里面添加文字。然后我们会发现，文字垂直方向上的居中，在height和line-height相同时不起作用，用“vertical-align:center;”也不行（毕竟它是用在行内元素的，这里我们讨论的是块或者行转块的），那么出现这种情况大多是父级元素的某些样式影响了，但是在不改动父级样式的情况下，怎么解决了？如果你的文字是在同一行的，那么可以加上“position:absolute;”，因为此时已经脱离了文档流了，那么对于它本身来说就不会受其它的元素样式的影响了，且会变成“display:block;”，这时在height和line-height相同时就可以起到文字垂直居中了。

        关于垂直居中的问题，一直都是比较多人关注的，水平居中一般我们采用“text-align:center;”,当然，它是对文本的居中，而不对元素的居中。如果它是用在外层div，内层div可通过“margin:0 auto;”让整体垂直居中。这只是其中一个方法而已。