首页 > 代码库 > 文字或是子div在父div里垂直居中
文字或是子div在父div里垂直居中
只有一行文字的话，直接用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>
文字或是子div在父div里垂直居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。