让文字垂直居中
前阵子小白鼠在开发一个网页，没想到遇到一个问题，文字无法垂直居中。然后就去网上找了半天，花里胡俏的方法一大堆，涉及到弹性盒子，边距，甚至js。有的方法有用却影响到别的元素，有的甚至没有用……
（图片源自网络，侵权请告知，小白鼠会将其删除）
后来经过大神指点，终于搞定了，原来很简单。
但这么简单的问题却困扰了小白鼠两天，今天我就分享出来，不让更多的小白跳坑里，也算做一个小笔记。
方法很简单，只需要：
将行高与元素的高设置成一样的即可
既然本文面对的人群是小白，那么我就唠叨一下，大神勿喷。。。
如果html是这样的：
<!DOCTYPE html>
<html lang="cn-zh">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>测试文字</div>
</body>
</html>
而且css是这样的：
div{
height: 30px;
}
height是元素高度，line-height就是行高，所以就在css里加上一句：
line-height: 30px;
也就是：
div{
height: 30px;
line-height: 30px;
}
搞定！
如果你想得到文中同款的代码高亮，可以参考我的另一篇文章，地址：http://www.360doc.com/content/21/0119/17/68935242_957819581.shtml，文中还有自己建站用的代码高亮哟。
如果你有更好的方法，欢迎评论留言。
如果本文对你有帮助，记得转藏，并且分享给身边更多的朋友，让知识传递。
赞 (0)