Home >Web Front-end >HTML Tutorial >css style setting variable height text vertical center_html/css_WEB-ITnose
css style setting variable height text vertical center_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:33:471546browse
Using CSS to vertically center text is relatively easy for browsers that support display: table. You only need to set the outer div to table and the inner div to table-cell. , and set the text to be vertically centered. However, for IE6/7, display:table is not supported and can only be processed using positioning. The outer div is positioned, the middle div is positioned absolutely relative to the outer layer, top is 50%, the inner span is positioned relatively, top is -50%, and the content is vertically centered through plus or minus 50% positioning.
Relevant demo code (no matter how you change the height of div1, you can ensure that the content is vertically centered, and the number of lines of content is not limited):
<!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>