{"action":"created","issue":{"url":"https://api.github.com/repos/oliverzheng/howtocenterincss/issues/23","labels_url":"https://api.github.com/repos/oliverzheng/howtocenterincss/issues/23/labels{/name}","comments_url":"https://api.github.com/repos/oliverzheng/howtocenterincss/issues/23/comments","events_url":"https://api.github.com/repos/oliverzheng/howtocenterincss/issues/23/events","html_url":"https://github.com/oliverzheng/howtocenterincss/issues/23","id":71729328,"number":23,"title":"checkout absolute positioning","user":{"login":"githubissue","id":11792735,"avatar_url":"https://avatars.githubusercontent.com/u/11792735?v=3","gravatar_id":"","url":"https://api.github.com/users/githubissue","html_url":"https://github.com/githubissue","followers_url":"https://api.github.com/users/githubissue/followers","following_url":"https://api.github.com/users/githubissue/following{/other_user}","gists_url":"https://api.github.com/users/githubissue/gists{/gist_id}","starred_url":"https://api.github.com/users/githubissue/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/githubissue/subscriptions","organizations_url":"https://api.github.com/users/githubissue/orgs","repos_url":"https://api.github.com/users/githubissue/repos","events_url":"https://api.github.com/users/githubissue/events{/privacy}","received_events_url":"https://api.github.com/users/githubissue/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-04-28T22:56:08Z","updated_at":"2015-04-30T19:17:58Z","closed_at":null,"body":"@oliverzheng filed this issue from https://twitter.com/oliverzheng/status/593185481958952960"},"comment":{"url":"https://api.github.com/repos/oliverzheng/howtocenterincss/issues/comments/97934347","html_url":"https://github.com/oliverzheng/howtocenterincss/issues/23#issuecomment-97934347","issue_url":"https://api.github.com/repos/oliverzheng/howtocenterincss/issues/23","id":97934347,"user":{"login":"shshaw","id":777155,"avatar_url":"https://avatars.githubusercontent.com/u/777155?v=3","gravatar_id":"","url":"https://api.github.com/users/shshaw","html_url":"https://github.com/shshaw","followers_url":"https://api.github.com/users/shshaw/followers","following_url":"https://api.github.com/users/shshaw/following{/other_user}","gists_url":"https://api.github.com/users/shshaw/gists{/gist_id}","starred_url":"https://api.github.com/users/shshaw/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shshaw/subscriptions","organizations_url":"https://api.github.com/users/shshaw/orgs","repos_url":"https://api.github.com/users/shshaw/repos","events_url":"https://api.github.com/users/shshaw/events{/privacy}","received_events_url":"https://api.github.com/users/shshaw/received_events","type":"User","site_admin":false},"created_at":"2015-04-30T19:17:58Z","updated_at":"2015-04-30T19:17:58Z","body":"Concerning `position: absolute` and centering:\r\n\r\nIf width/height of the `position: absolute` element are set (percentage, pixels, or any unit), then it's as simple as:\r\n\r\n```css\r\n.absolute-center {\r\n  position: absolute;\r\n  top: 0; left: 0; bottom: 0; right: 0;\r\n  margin: auto;\r\n}\r\n```\r\nYou can fine tune the positioning of the element using the appropriate margin: `margin-right: 0` will align the item on the right side, or `margin-bottom: 0` for bottom alignment. You can also offset the bounds of where the item is centered by adjusting the `top`, `left`, `bottom` or `right` values. I cover this all more in-depth here: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/\r\n\r\nAlternatively, dimensions are not needed if you aren't going to horizontally or vertically center a `position: absolute`. Aligning bottom right would simply be `position: absolute; bottom: 0; right: 0;`, and the bounding box is fit to the content.\r\n\r\nSome other methods for centering (flexbox, table-cell, transforms) are covered in the article, and the CSS Tricks article is helpful as well: https://css-tricks.com/centering-css-complete-guide/"}}