params.json

{"name":"Haoyuchen1992.github.io","tagline":"Negative Margin -- A way to center the content","body":"Example Code:\r\n\r\n```\r\n<div class=\"content\">\r\n    <img src=\"http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png\" width=\"200\" height=\"100\">\r\n</div>\r\n```\r\n\r\nCSS\r\n```\r\n.Content {\r\n    position:absolute;\r\n    left:50%;\r\n    top:50%;\r\n    width:550px;\r\n    height:350px;\r\n    margin-top:-190px;\r\n    margin-left:-275px;\r\n    padding:15px;\r\n}\r\n```\r\n Step One: Center the div but div center is not the same as body center\r\n```\r\n.Content {\r\n    position:absolute;\r\n    left:50%;\r\n    top:50%;\r\n```\r\n\r\nStep Two: Use negative margin to let the div center overlap with body center:\r\nFiddle example [Final Example](http://jsfiddle.net/chenhaoyu/ZLn9s/1/)\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}