css样式设置高度不定文本垂直居中_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 12:33:471536瀏覽
使用css实现文本垂直居中，对于支持display: table的浏览器来说，是比较容易实现的，只需要对外层div设置为table，内层div设置为table-cell，并设置文本垂直居中即可。但对于IE6/7，并不支持display:table，只能改用定位的方式来处理。外层div给一个定位，中间层div相对外层绝对定位，top为50%，内层span相对定位，top为-50%，通过正负50%的定位，使内容垂直居中。
相关演示代码（不管怎么改变div1的高度，都可以保证内容垂直居中，内容不限行数）：
<!DOCTYPE HTML><html><head><title>ie中垂直居中</title><meta charset=UTF-8"><style type="text/css">.div1{ width:300px; position:absolute; border:1px solid #000; top:100px; left:200px; display:table;}.div2{ display:table-cell; vertical-align:middle; *position:absolute; *top:50%;}span{ *position:relative; *top:-50%;}</style></head><body><div class="div1" style="height:200px"> <div class="div2"> <span>IE6/7使用定位关系来垂直居中，IE8/9使用display:table和display:table-cell</span> </div></div></body></html>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn