margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架
有这么一个题目：
使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。
要求只使用2个div完成
答案：
<!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>2个DIV</title> <style type="text/css"> #heng,#shu{left:50%;top:50%;position:absolute; background-color:#f00;} #shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;} #heng{width:150px;height:50px;margin-left:-75px;margin-top:-25px;background-color:#f00;} </style> </head> <body> <div id="heng"></div> <div id="shu"></div> </body> </html>
看完，不禁对 margin: -75px 这个用法产生了深深的疑问？怎么还能这么用，这怎么理解？
无论国外国内的w3cschool都没有解释这个问题，只是说允许负值。但是负值该怎么形象的去理解呢？
Google了一下 “margin negative values”，下面是2个比较详细的解释。
有时间就翻译下。
The Definitive Guide to Using Negative Margins
