Home > Article > Web Front-end > css样式设置高度不定文本垂直居中_html/css_WEB-ITnose
css样式设置高度不定文本垂直居中_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:33:471477browse
使用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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：移动平台开发需要的记录(续)_html/css_WEB-ITnoseNext article：精美&创意的WordPress新发主题集合_html/css_WEB-ITnose