{"id":14745,"date":"2011-10-29T12:58:12","date_gmt":"2011-10-29T19:58:12","guid":{"rendered":"http:\/\/css-tricks.com\/?p=14745"},"modified":"2019-03-29T08:52:45","modified_gmt":"2019-03-29T15:52:45","slug":"centering-in-the-unknown","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/centering-in-the-unknown\/","title":{"rendered":"Centering in the Unknown"},"content":{"rendered":"

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don’t know anything? It’s still kinda doable.<\/p>\n

<\/p>\n

Not too hard: Known Child<\/h3>\n

If you know the height and width of both the element to be centered and its parent element (and those measurements won’t change, i.e. not fluid width environment) one foolproof way to center the element is just to absolute position it with pixel values so it looks perfectly centered.<\/p>\n

Let’s say you know the exact width and height of the element you are centering, but the parent element can change<\/strong> in height and width. <\/p>\n

\"\"<\/figure>\n

You absolutely position the element to be centered and set the top and left values to 50% and the margin top and left values to negative half of the elements height and width. That was a tounge twister, so check this out.<\/a><\/p>\n

Harder: Unknown Child<\/h3>\n

The hard comes in when you don’t know the dimensions of the element to be centered.<\/p>\n

\"\"
What do we know? Nothing! When do we know it? Now!<\/figcaption><\/figure>\n

The grossest way to handle it is literally tables:<\/p>\n

<table style=\"width: 100%;\">\r\n  <tr>\r\n     <td style=\"text-align: center; vertical-align: middle;\">\r\n          Unknown stuff to be centered.\r\n     <\/td>\r\n  <\/tr>\r\n<\/table><\/code><\/pre>\n
If you are worried about the semantics of that, you could attempt to match it to your content. <\/p>\n
<div class=\"something-semantic\">\r\n   <div class=\"something-else-semantic\">\r\n       Unknown stuff to be centered.\r\n   <\/div>\r\n<\/div><\/code><\/pre>\n
And get the same result as the tables like:<\/p>\n
.something-semantic {\r\n  display: table;\r\n  width: 100%;\r\n}\r\n.something-else-semantic {\r\n  display: table-cell;\r\n  text-align: center;\r\n  vertical-align: middle;\r\n}<\/code><\/pre>\n
CSS tables might be fine for you. Or it might not. Tables do render a bit differently than just a regular block-level div does. For instance the 100% width thing. A table will only stretch to be as wide as it needs to for the content inside it whereas by default a block level element will expand to the width of its parent automatically. Also, god help you if you need other content inside that div that you want to position or otherwise not act as a table-cell.<\/p>\n
Micha\u0142 Czernow wrote in to me with an alternate technique that is extremely clever and accomplishes the same thing. If we set up a “ghost” element inside the parent that is 100% height, then we vertical-align: middle<\/code> both that and the element to be centered, we get the same effect.<\/p>\n
\"\"
See what we did there?<\/figcaption><\/figure>\n
So does that ghost element need to be an un-semantic element? Nope, it can be a pseudo element.<\/p>\n
\/* This parent can be any width and height *\/\r\n.block {\r\n  text-align: center;\r\n\r\n  \/* May want to do this if there is risk the container may be narrower than the element inside *\/\r\n  white-space: nowrap;\r\n}\r\n \r\n\/* The ghost, nudged to maintain perfect centering *\/\r\n.block:before {\r\n  content: '';\r\n  display: inline-block;\r\n  height: 100%;\r\n  vertical-align: middle;\r\n  margin-right: -0.25em; \/* Adjusts for spacing *\/\r\n}\r\n\r\n\/* The element to be centered, can also be of any width and height *\/ \r\n.centered {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  width: 300px;\r\n}<\/code><\/pre>\n
<\/code>View Demo<\/a><\/pre>\n
I’d like to tell you the ghost element technique is way better and should be the go-to centering technique for the ages. But in reality, it’s just about the same as the table trick. The browser support for this is essentially everything and IE 8+. IE 7 doesn’t support pseudo elements. But it doesn’t support CSS tables either, so it’s a horse apiece. If IE <= 7 support is needed, it's <table><\/code> time (or use an equally un-semantic <span><\/code> or something for the ghost element).<\/p>\n
This stuff isn’t brand new territory. Gary Turner wrote about it<\/a> like 5 years ago. But I credit Micha\u0142 for doing it with a pseudo element and making it the most semantic approach yet.<\/p>\n
Note:<\/strong> The 0.25em nudge-back is a little janky. To do it perfectly, you could set font-size: 0; on the parent and then notch the font size back up inside the content container.<\/p>\n","protected":false},"excerpt":{"rendered":"
When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don’t know anything? It’s still kinda doable.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[1153,1154,1152],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":181375,"url":"https:\/\/css-tricks.com\/centering-css-complete-guide\/","url_meta":{"origin":14745,"position":0},"title":"Centering in CSS: A Complete Guide","date":"September 2, 2014","format":false,"excerpt":"Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/guide-centering.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331815,"url":"https:\/\/css-tricks.com\/centering-in-css\/","url_meta":{"origin":14745,"position":1},"title":"Centering in CSS","date":"January 1, 2021","format":false,"excerpt":"Adam Argyle has a post over on web.dev digging into this. He starts with the assumption that you need to do vertical centering and horizontal centering. It's that vertical centering that has traditionally been a bit trickier for folks, particularly when the height of the content is unknown. We have\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/centering.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":22270,"url":"https:\/\/css-tricks.com\/centering-percentage-widthheight-elements\/","url_meta":{"origin":14745,"position":2},"title":"Centering Percentage Width\/Height Elements","date":"July 3, 2013","format":false,"excerpt":"If you know the exact width\/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That's great if you know the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":308061,"url":"https:\/\/css-tricks.com\/lh-and-rlh-units\/","url_meta":{"origin":14745,"position":3},"title":"`lh` and `rlh` units","date":"May 5, 2020","format":false,"excerpt":"There's some new units I was totally unaware of from the Level 4 spec for CSS values! The lh unit is \"equal to the computed value of line-height\" and rlh is the same only of the root element (probably the  element) rather than the current element. Why would that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/css-lh-unit.png?fit=1152%2C528&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333756,"url":"https:\/\/css-tricks.com\/exploring-the-complexities-of-width-and-height-in-css\/","url_meta":{"origin":14745,"position":4},"title":"Exploring the Complexities of Width and Height in CSS","date":"February 5, 2021","format":false,"excerpt":"The following article is co-authored by Uri Shaked and Michal Porag. Let\u2019s explore the complexities of how CSS computes the width and height dimensions of elements. This is based on countless late-night hours debugging and fiddling with lots of combinations of CSS properties, reading though the specs, and trying to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/steps.png?fit=875%2C656&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303699,"url":"https:\/\/css-tricks.com\/centering-a-div-that-maintains-aspect-ratio-when-theres-body-margin\/","url_meta":{"origin":14745,"position":5},"title":"Centering a div That Maintains Aspect-Ratio When There’s Body Margin","date":"February 18, 2020","format":false,"excerpt":"Andrew Welch had a little CSS challenge the other day to make an ordinary div: \u2022 centered vertically + horizontally\u2022 scales to fit the viewport w\/ a margin around it\u2022 maintains an arbitrary aspect ratio\u2022 No JS There's a video in that tweet if it helps you visualize the challenge.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/aspect-ratio.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/14745"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14745"}],"version-history":[{"count":14,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/14745\/revisions"}],"predecessor-version":[{"id":285702,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/14745\/revisions\/285702"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=14745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}