<!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" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>水平垂直居中div演示效果</title> <style type="text/css"> .align-center{ /* 负边距+定位：水平垂直居中（Negative Margin） 使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），将content的中心拉回到body的中心，已到达水平垂直居中的效果。 */ position:absolute; left:50%; top:50%; width:400px; height:400px; margin-top:-200px; margin-left:-200px; border:1px dashed #333; } </style> </head> <body> <div class="align-center">水平垂直居中div演示效果</div> </body> </html>