使⽤button标签让⽂字垂直⽔平居中
关于让⽂字或⼦元素模块在⽗级容器⾥垂直居中的问题我在⽹上查看了很多⽅法都不太如意，现在分享下如何使⽤button标签让⽂字垂直⽔平居中。
直接上代码：
<style type="text/css">
*{margin: 0;padding: 0;}
.fl{ float:left; margin-right:10px;}
.bg{ width:300px; height:200px; border:1px solid #eee; background:#666;}
div{ color:#fff; font-size:14px;}
button{width: 100%;height: 100%; background:none; border:none;}
button div{ margin:0 auto; width:200px; height:100px;}
</style>
<div class="met1 bg fl">
<button><div>我要⽔平垂直居中，我可能是两⾏也有可能是三⾏，也就是我要⽔平垂直居中，也就是说我的⾏数不固定，你看着办吧。呵呵</div></button </div>
效果图：
没有设置宽⾼：
设置了宽⾼：
在ie7以下需要设宽度，不然就会显⽰⼀⾏；
css设置文字垂直居中兼容性：兼容所有浏览器；
原理：应⽤了button标签默认居中的属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。