DIV 浏览器水平垂直居中及文字垂直水平居中问题

来源：互联网发布：武侠小说推荐知乎编辑：程序博客网时间：2024/05/16 05:01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>水平垂直居中DIV</title><style type="text/css">body, div, form, img, ul, li {font-family: "Tahoma";margin: 0;padding: 0;border: 0;list-style-type: none;}.all {width:100%;}.all ul {position:absolute;top:50%;left:50%;margin-top:-150px;    margin-left:-300px;width:600px;height:300px;background-color:#666;}.all ul li {line-height: 50px;text-align:center;vertical-align:middle;background-color:#CCC}</style></head><body><div class="all">  <ul>    <li>水平垂直居中DIV</li>  </ul></div></body></html>

这里注意两个地方
position:absolute(绝对定位)
line-height: 50px;(只有定义了line-height文字vertical-align 才能生效的)