标签：style blog http color io os ar for sp
只有一行文字的话，直接用line-hight可以解决。
有多行文字或是想要子div在父div里垂直居中：
首先要理解vertical-align: middle只在table属性中才会垂直居中，应用到display:inline-block元素的话就是和隔壁元素居中对齐。
方法一：
在div里增加一个隐藏子元素，高度为100%和父div一样，这样再设置vertical-align: middle的话子div就会和父div一样高的子元素垂直居中对齐。
<style> .box{ float: left; margin: 20px; width: 200px; height: 200px; border: 1px solid #666; } .box img{ width: 100px; height: 100px; vertical-align: middle; } .box span{ display: inline-block; vertical-align: middle; } </style> <style> .demo2{ font-size: 0; } .div_em{ display: inline-block; *display: inline; *zoom: 1; height: 100%; vertical-align: middle; } .demo2 .txt{ font-size: 12px; } </style> <div class="demo2 box"> <em class="div_em"></em> <img src="project/images/code.jpg" alt=""> <span class="txt">文字<br>文字</span> </div> <!-- demo2改版 --> <style> .demo2_x{ font-size: 0; } .demo2_x:after{ content: ‘‘; display: inline-block; *display: inline; *zoom: 1; height: 100%; vertical-align: middle; } .demo2_x .txt{ font-size: 12px; } </style> <div class="demo2_x box"> <img src="project/images/code.jpg" alt=""> <span class="txt">ie8++<br>文字</span> </div>
方法二：
把父div display:table,里面的子div display: table-cell;再设置vertical-align: middle
<style> .demo3{ display: table; } .demo3 .in{ display: table-cell; vertical-align: middle; } </style> <div class="demo3 box"> <div class="in"> <img src="project/images/code.jpg" alt=""> <span class="txt">ie8++<br>文字</span> </div> </div>
方法三：
用position:absolute；left:50%;top:50%;先把子div移动，然后再以子div的高度和宽度来设置margin-top：1/2子div高度;margin-right:1/2子div宽度
<style> .demo4{ position: relative; } .demo4 .in{ position: absolute; top: 50%; left: 50%; width: 200px; height: 100px; padding: 10px 0; background: #666; margin-left: -100px; margin-top: -60px; } </style> <div class="demo4 box"> <div class="in"> <img src="project/images/code.jpg" alt=""> <span class="txt">css3<br>文字</span> </div> </div>
下面是用css3实现的，思路和上面一样
<style> .demo5{ position: relative; } .demo5 .in{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 200px; } </style> <div class="demo5 box"> <div class="in"> <img src="project/images/code.jpg" alt=""> <span class="txt">css3<br>文字</span> </div> </div>
标签：style blog http color io os ar for sp
原文地址：http://www.cnblogs.com/jellyAndjammy/p/3998808.html
