div内容居中显示

最新推荐文章于 2023-01-11 19:04:11 发布

hellomy

最新推荐文章于 2023-01-11 19:04:11 发布

阅读量3.3k

点赞数

文章标签： div border xhtml html table

本文链接：https://blog.csdn.net/hellomy/article/details/5889832

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 多行文字实现垂直居中 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { font-size:12px;font-family:tahoma;} div#wrap { display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden; } div#subwrap { vertical-align:middle; display:table-cell; Transitional//EN" _position:absolute; _top:50%; } div#content { _position:relative; _top:-50%; } </style> </head> <body> <div id="wrap"> <div id="subwrap"> <div id="content"><pre>现在我们要使这段文字垂直居中显示! div#wrap { border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:500px; position:relative; } div#subwrap { position:absolute; border:1px solid #000; top:50%; } div#content { border:1px solid #000; position:relative; top:-50%; } </pre></div> </div> </div> </body> </html>