16 ms·

CSS Absolute Centering

526 points by nvk 13y ago

gamegoblin 13y ago
I have just started doing web programming in the last month after several years of applications programming. It feels like to me, and someone please tell me why I'm wrong, that the amount of hackery that goes into making webpages look the way web designers want them to is astounding. I google for solutions to various problems and the top rated comment on StackOverflow says "...there isn't a good way to do this in CSS, but here is this hack...". I feel like somewhere in the universal programming ether there exists a beautiful unification of HTML, CSS, and JS that doesn't rely on any ugly hackery, and it's just waiting to be found and start a brave new world of web programming...
- deleted 13y ago
  [deleted]
  - dm2 13y ago
    And no longer have to support IE7 (if you're lucky).
- kmfrk 13y ago
  90% of webdesign is dealing with errant behaviour. It's why it's so frustrating when people treat front-end design with disdain as something trivially easy. Of course, if you only decide to serve the newest version of Chrome and Safari, it can be easy to remember that there people out their who don't - or can't use them.
  - syncerr 13y ago
    > webdesign It's web development you're referring to.
    - jiggy2011 13y ago
      Without wishing to descend too much into semantics the accepted definitions (at least within the industry) seem to be that "design" is basically Graphics/Layout (so includes HTML/CSS) and development is programming (either client or server side).
      - matthewmacleod 13y ago
        I don't agree. Design is design, development is split into front- and back-end specialisations. Some developers straddle both, but there are few people who are both (good) designers and developers. I don't know of anybody within the industry who would refer to a front-end developer as a "designer."
        jiggy2011 13y ago
        It depends if you are programming or simply describing page layout. Front end development could also include things like Javascript. There are plenty of designers who are not Javascript programmers but who can use CSS etc.
      - simonw 13y ago
        HTML and CSS are programming.
        jiggy2011 13y ago
        You could probably argue that in a technical sense but it's a person who works with HTML/CSS but not say JS etc would probably be considered a designer more than a programmer.
        simonw 13y ago
        I've worked at a bunch of different companies (Yahoo!, The Guardian, various smaller companies) and in all of them the "designers" were the people who did the visual design using Photoshop and Illustrator - those people rarely if ever wrote HTML and CSS, and almost never to production level standards. The people writing production-ready HTML and CSS were known as "web developers" or "client-side/front-end engineers".
- ams6110 13y ago
  Purists will attack if you do this, but if you just want to get something done, using tables for layout often solves a lot of these headaches. Horizontal and vertical alignment of left, right, center, top, middle, bottom are quick and easy. Edit: since you are a new developer, let me add that "ugly hackery" is what you quickly arrive at once you start doing anything of reasonable complexity (read: stuff that's actually useful). Handling the edge cases is what consumes most of the code in real production applications, and this is conveniently omitted from the beautifully clean code presented in tutorials and examples.
- thurn 13y ago
  We're working on solving these problems with new tools (flexbox in this particular case), but it takes time for those tools to become widely usable. You can look at e.g. Google's Polymer project for a glimpse at the vision for web programming in the future.
- dsego 13y ago
  Some would argue that whole doing the web with markup and stylesheets thing is completely wrong (Bret Victor comes to mind). And I tend to agree. CSS is a hack, heck, HTML itself is a hack. Some material: http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-sucks http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-... http://diveintohtml5.info/past.html http://diveintohtml5.info/past.html
- blhack 13y ago
  I'd love to know why just using tables is wrong. The user gets what they want, the designer gets what they want, and the only people unhappy are some purists. why? what about this is wrong?
  - chrislomax 13y ago
    I'm no purist but I am in the mindset, "you wouldn't use a fork to eat soup". I do agree though that it is a pain when something is easily achievable in tables but doesn't work in normal CSS. Vertical alignment being one of them. What does annoy me is when you see people creating "CSS table" systems. I'm not being funny but that is just plain stupid. I saw a whole project dedicated to replicating the behaviour of a table. I started developing when tables were fine to use for all layouts and I feel CSS was adopted as a layout too early without some very basic things being answered.
  - wmkn 13y ago
    If it solves your problem there is nothing wrong with it. However, tables are considered problematic because they encode the layout of the page in the HTML. Ideally, you would semantically structure your page using HTML and add style and layout using CSS. This way of working would allow for maximum flexibility - you can restyle your page without ever touching the HTML. If you use tables it becomes much more difficult because the table already adds a certain fixed layout. Unfortunately the real world hardly ever works like this.
    - ahallock 13y ago
      I think people have gone too far with this mindset. I develop pages using a mostly semantically structured approach, but I'm not afraid to sprinkle layout-only elements where they make sense, especially when using grids.
  - jsiarto 13y ago
    Tables are for tabular data--designing with HTML/CSS isn't perfect, but using tables for layout is an even less-elegant solution. It leads to a markup soup of nested tags and tables and difficult-to-maintain codebase. Good design and good markup go hand-in-hand and often you need to strike a balance between flashy visual design and solid underlying structure. This is also why visual designers should understand how their designs get implemented in HTML and CSS--it will create a restraint and limit the amount of "hacks" you have to do to make a design work. Also remember that not everyone views the web in a browser. Having well structured markup helps those that use screen readers or alternate methods of browsing the web.
- crazygringo 13y ago
  As someone who's done an insane amount of front-end programming, you're entirely right. Sometimes I wish I could get back all the brain cells that I've wasted on the hundreds of "little tricks" you need to know to get things working -- and then working cross-browser. Short answer: CSS is just a horribly, horribly, terribly badly designed language. It's the absolute worst. Don't let anybody tell you otherwise. It's that, it's what we've got, and it is awfully powerful in many ways. But it's complete rubbish in others, which include a lot of incredibly basic layout things.
  - Skalman 13y ago
    I agree that it's a disaster, but: Is there any better language? I feel that very few of the "native" variants have APIs that are simpler to deal with. (Of course Sass is much better than vanilla CSS, but it's basically the same if you strip away the sugar)
    - sker 13y ago
      XAML is very well designed, not for the web though. It was designed from the ground up to be consistent with only one implementation, as opposed to CSS, which evolved over the years on multiple implementations. It can get quite verbose since it's XML-based, but at least what you code is what you get.
      - platz 13y ago
        I've not built apps in xaml but I've heard the that its a PITA once your app gets to a certain size and complexity.
        sker 13y ago
        I agree, I just think it's well designed and consistent. Plus, CSS can also be a royal PITA, that's why I take refuge in back-end development when possible.
      - Skalman 13y ago
- thekingshorses 13y ago
  Just wondering. Why did you decided to become a web developer after so many years? Usually developers try to find a way to solve the problem because they are engineers and that is what engineers should do. HTML, CSS and JS wasn't invented to what it has become today. It has evolved thanks to people like you and me who has find ways to use to our advantage. Example AJAX was existed since dark ages (IE5+) but no one used/knew about it. Google used that in google maps in 2004. Now, pirates are using it in usenet/torrent applications (utorrent, sabnzbd, sickbeard etc), or 3d rendering in the cloud (http://home.lagoa.com/ http://home.lagoa.com/). If you are waiting for something better to be found, i think you will have to wait long time. There is nothing on horizon that is as simple as HTML. For me, hardest part is in the web development is to deal with designers and product managers.
  - gamegoblin 13y ago
    I'm not a web developer. I just wanted to add a bit of web development skills to my set of abilities so I've been learning the Django framework and the nuances of HTML/CSS/JS.
- bane 13y ago
  It's absolutely stupid and frustrating. Almost nothing in modern web design just works and it's because of both a badly written standard and badly written implementations. I get it that HTML is supposed to be for content, CSS for layout and JS for programmatic logic, but the house of cards, duct tape, bailing wire and chewing gum that goes into making a web application is astonishing. I almost think it would be easier for somebody to come up with an entirely different "web application/dynamic document layout" technology stack with a sane and well-working model all the way through, so that stupid basic things like vertical alignment don't go unfixed year after year after year and we end up with the teetering tower of hacks we have today. We pretty much know what we want out of the web, somebody should just go build it from top to bottom all over again and throw out the huge train wreck we have to deal with today. Sure it would take a while to catch on, but I bet a more efficient set of tools and display environments would rapidly catch on. We've done it before and replaced older broken technologies with newer, why not do it again?
  - lutusp 13y ago
    > I almost think it would be easier for somebody to come up with an entirely different "web application/dynamic document layout" technology stack with a sane and well-working model all the way through, so that stupid basic things like vertical alignment don't go unfixed year after year after year and we end up with the teetering tower of hacks we have today. Yes, but if someone managed to create a logical, concise Web publishing standard that was something other than a can of worms, it would be a proprietary system, most likely patented. Which means no one would voluntarily adopt it. The advantage of a public, open-source, no-one-in-charge system like we have now is that it's collaborative, democratic, and free. That's also its disadvantage. For a classic counterexample, look at Apple's products -- they create much more consistent and usable products than the rest of the marketplace. But as many have said, Apple is a walled garden. If an Apple product happens to do what you want with no changes, then fine, otherwise you're out of luck. Freedom is messy. Democratic technology seems always to veer toward chaos.
    - bane 13y ago
      I wonder if this is a result of a broken committee process that should have had a benevolent dictator in charge of it instead.
- CmdrKrool 13y ago
  My journey: See this well trafficked "CSS sucks"-type article, Ctrl-F the comments for John Nagle, be tantalized at the hints of how it could be so much better: http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-sucks/ http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-... Look up "constraint-based layout" and more specifically "constraint cascading style sheets". You'll find papers such as this one: http://citeseer.ist.psu.edu/viewdoc/summary?doi=10.1.1.101.4819 http://citeseer.ist.psu.edu/viewdoc/summary?doi=10.1.1.101.4... and this one: http://csis.pace.edu/~marchese/CS835/Lec7/mmJournal.pdf http://csis.pace.edu/~marchese/CS835/Lec7/mmJournal.pdf thoroughly describing such a system. Find "GSS - Grid Style Sheets" at http://gridstylesheets.org/ http://gridstylesheets.org/ , "an implementation of Badros & Borning's Constraint Cascading Style Sheets". This is still half on my todo list, but it seems like the real thing. The catch? Relies on Javascript. Dream of a world in which this kind of system was built into browsers as the primary way of doing layout <insert Simpsons happy dancing people gif here>.
  - cousin_it 13y ago
    Best comment in this thread IMO. Thanks! Some key parts from John Nagle's comments: It’s not that CSS is hard; it’s that CSS is bad. (...) The worst problem with DIV-based layout is that the layout system is too weak. (...) There’s no way to relate a DIV to anything but its predecessor, its parent, or an absolute position. (...) Table layouts allow table cells which span multiple rows and columns. If all tables could do were simple grids of cells, the CSS approach might make sense, but tables are more general than that.
- rimantas 13y ago
  Be glad you did not have to do this when IE5/6 was still around and Firefox was starting to go strong. Sites with sole purpose todocument all the hacks you need to do to force IE to behave a still around.
- dylan-m 13y ago
  One of the problems is we often have people doing web design was if it's print design. Find yourself a focused web designer who really understands the medium and, chances are, you won't run into this sort of problem. A good web designer understands that different browsers are going to have different capabilities, and build graceful degradation into the design. A good web designer knows that screens come in all shapes and sizes, and will avoid raster graphics and px-units wherever possible. CSS, from my experience, makes it very easy to do web design the right way and very hard to do it any other way. It's just that the right way is often a little different from what people expect. If you accept that <i>the browser is the boss</i>, you'll be a lot happier, and incidentally your users will be a lot happier as well. The trouble is people coming from other platforms or mediums often expect 100% control, and for that it really doesn't hold your hand.
- chestnut-tree 13y ago
  "...the amount of hackery that goes into making webpages look the way web designers want them to is astounding." I totally agree. For example, the CSS box model sounds so simple and elegant at first, but when you add dozens of styles and elements to your page, the interaction between different styles can quickly become horribly messy no matter how disciplined you are with your CSS code. Beyond a certain number of styles, CSS inheritance turns into a black art. CSS simply doesn't scale well for anything beyond relatively simple pages. A huge part of designing web pages is layout and spacing and yet positioning and spacing elements remains ridiculously messy and convoluted (even with CSS3). You could also argue that tools like SASS and LESS are in effect sticking-plasters for inadequacies in CSS. I know hindsight is a wonderful thing, but if we were designing CSS today from scratch, I think it would be designed very differently.
  - babby 13y ago
    CSS could be redeemable if; the box model defaulted to box-sizing: border-box;. If vertical-align and margin: auto (or variants) worked with variable heights and widths, and on all elements. If percentages of heights worked inside all elements. It seems like flex-box fixes a lot of this, but at the same time, it could be so much easier. You're right though. CSS would be so much different and so much more gloriously painless to use. I can even imagine a better styling engine allowing for applications like macaw, dreamweaver to actually generate properly good CSS and thus building sites with a GUI would finally be plausible.
- steveax 13y ago
  We sorta had that already. It was called Flash (or Silverlight, etc. pick your poison) and while it was easier for authors to do many things, it sucked for users in more ways than I can count.
the_cat_kittles 13y ago
Very nice. When I actually stop to think about it, it's amazing to me that this is not immediately easy to do. Things like this give credence to Bret Victor's most recent talk.
deleted 13y ago
[deleted]
msujaws 13y ago
We use this same technique in Firefox to center images when viewing them standalone, inspect http://www.elizabethtownfamily.com/wp-content/uploads/2012/09/African_Elephant_Transparent.png http://www.elizabethtownfamily.com/wp-content/uploads/2012/0... to see for yourself :)
ghostdiver 13y ago
What is performance loss/gain compared to Javascript solution of this problem?
- ashray 13y ago
  There's an infinite performance gain for browsers that have javascript turned off or use noscript. Other than that, I'd say that doing this kind of stuff in CSS would by default be much faster in a web page context.
  - ghostdiver 13y ago
    What if I don't want fixed dimensions? Maybe media queries could help a bit, but Javascript usage seems to be inevitable. ps. I didn't mean pure javascript solution anyway:)
    - erichurkman 13y ago
      If you don't care about older browsers [1], you can use Flexbox to do all sorts of dynamic, fluid positioning. [1] http://caniuse.com/flexbox http://caniuse.com/flexbox - it's in the current version of all browsers (some still prefixed).
ForFreedom 13y ago
Why do you need this to center a box in css? It can be done without this too.
jiggy2011 13y ago
It confuses me that you have to specify things in terms of margins, I understand how that is technically correct but surely something like alignment: center should just align to the center of the parent element? I've spent hours in the past the past getting correct centring behaviour in CSS, then tried by just putting the whole thing inside <center></center> and had it work immediately in all browsers. But apparently that's "cheating".
- null_ptr 13y ago
  Cheating according to who? Surely not your website's users? It's the standards makers' fault. Needing to center something on either the x or y axis relative to the parent is as common a scenario as you can get.
  - jiggy2011 13y ago
    Well technically the center tag is deprecated so any browser could simply drop support for it (as they did with <blink> in a future version and break the site.
crazygringo 13y ago
Just in case anyone's unaware... it's entirely possible to vertically center elements of variable height too in pure CSS... it's just "unsemantic", because it relies on the fact that only table cells have "vertical-align:middle". But that's how I center every one of my "modal dialogs" on a site -- the whole modal dialog is inside a <table> with position:fixed and top/bottom/left/right:0. Then, just give the <td> a "vertical-align:middle", and then put your desired visible dialog <div> inside it. It's annoying to have to wrap something inside of a <table><tr><td> just to vertically center something, but it sure beats using JavaScript to do it. (You might be able to do it just with the display:table-cell property too, but it's been a long time since I checked browser compatibility.)
- bhauer 13y ago
  At least in every browser I've tested, display:table-cell works, as long as that is inside another element with display:table. This allows one to retain pedantic purism of all divs.
  - syncerr 13y ago
    It's not as big a deal anymore, but table-cell is not supported in IE6-7. http://caniuse.com/css-table http://caniuse.com/css-table
    - gcb0 13y ago
      >not a big deal Browser still has more users than Firefox had some years ago when we started talking about supporting all browsers. Unfortunately.
      - w1ntermute 13y ago
        It's funny how so many web devs just ignore older browsers out of a sense of superiority towards users of those browsers. I've even heard some of these guys say "they're not my target audience, so why should I care?" They are, of course, inevitably, Apple fanbois. Fortunately, they are not usually in charge of making business decisions at any significant companies.
hayksaakian 13y ago
Does it seem a bit off to anyone else in chrome? http://www.imgur.com/7JA69Ty.png http://www.imgur.com/7JA69Ty.png Or is the browser chrome considered usable real estate.
- arxpoetica 13y ago
  Looks good to me...
- systemtrigger 13y ago
  You are correct, it is off by the height of the bar at the bottom of the window. It uses fixed positioning -- not absolute positioning as was prescribed in the hack. Also he sets the modal height to 50%. The CSS of the demo is not the CSS of the write-up.
  - enyaboi 13y ago
    This !!!! You can also do this position: relative; margin-top: 50%; transform: translateY(-50%);
    - systemtrigger 13y ago
      You can, if you don't mind it breaking in IE < 9.
hpaavola 13y ago
It's a shame that we need to hack layouts to work with language designed for changing fonts and colors.
mkl 13y ago
I haven't done any front end web work so I'm confused by this. Can someone please explain why it is noteworthy? It seems strange to me that something as simple as centring a box should require special attention. Why aren't such tasks trivial beginner stuff?
- steveax 13y ago
  Centering content of unknown dimensions (and since the user is ultimately in control of font size this happens often) vertically is surpringly difficult to do if you want to support legacy browsers. It's a common pain point. There are others, but this one is particularly vexing (esp. to newcomers to CSS) because it seems, at first glance, like it should be easy.
jafaku 13y ago
Can someone paste the code somewhere else please? The linked website is broken. And yes, I have Javascript enabled. But it's probably using localStorage (with no graceful degradation), which I won't allow. Is this becoming a thing? Either you give up your privacy, or you can't surf the web anymore?
- systemtrigger 13y ago
  margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; The JavaScript console error I see is: Blocked a frame with origin "http://s.codepen.io" from accessing a frame with origin "http://codepen.io". Protocols, domains, and ports must match. localStorage.keys is null, thus the page does not appear to be using localStorage. How is localStorage a significant privacy concern? My understanding is that websites only have access to the keys stored by that particular domain.
marizmelo 13y ago
There is anything new here ?
pbreit 13y ago
Vertically centering dialog boxes in a window is a minor pet peeve of mine. Boxes should be slightly above center. If I recall correctly, the original Mac UI guidelines specified that the midpoint of the box should be 1/3 the distance from the top.
marcolz 13y ago
Those CSS class names are unacceptable. (:grin:)
oakaz 13y ago
It's still impossible if you'd like to center a div that resizes itself depending on the content.
- emn13 13y ago
  nope, consider: http://codepen.io/KatieK2/pen/ucwgi http://codepen.io/KatieK2/pen/ucwgi or http://jsbin.com/uqutol/3/edit http://jsbin.com/uqutol/3/edit These have intrinsically sized (autosized) boxes that vertically and horizontally center in some container.
namuol 13y ago
Don't forget to sacrifice at least one goat, if you want cross-platform, standards-compliant code.
stesch 13y ago
Doesn't work with NoScript. Bad example.
- cbr 13y ago
  Huh? This solution doesn't use any javascript.
  - dredmorbius 13y ago
    Regardless, with ScriptSafe (Chrome) enabled, all I see is a blank page. I've got to enable assets. and s.codepen.io to see the page rendered. That appears to be due to the use of an iframe from s.codepen.io for the content.
candl 13y ago
HTML/CSS is generally quite flexible when it comes to operations on text. No surprise since it was its intended purpose to be a format for documents. Making any layouts and god forbid centering elements has always been a headache for me. Even by looking at the CSS examples provided by the link my first thought is how random they all seem and how ugly they are not to mention difficult to remember and use. There should be a single way to center an element. It should be an obvious operation given how important and common it is. Some very useful CSS properties might take a lot of code and be hard to implement in native GUI toolkits like floats, overflow, height/width with percents, text wrapping etc. This is a sweet spot where HTML/CSS shines. I have been playing with QML lately and decided to implement the Dialog (Absolute center within viewport) that pops after visiting the linked page just for comparison: Here's the dialog equivalent that just fills the entire screen of an application done with QtQuick 2.0 for Desktop. http://pastebin.com/mnN3Zr6N http://pastebin.com/mnN3Zr6N Layouting is easily done by anchors. Filling a rectangle to match a parent's container, centering an element inside a parent, etc. Other containers such as Rows, Columns or Grids are also provided. Property bindings are used for centering the dialog even if the viewport changes. Text wrapping is also done explicitly and binding was necessary to limit text width to the ScrollView for it to work. One big difference compared to CSS is that by looking at the source I can see at glance what the layout structure is and what might be happening with the element. Another cool thing about QML is that it's as simple as taking the code, creating a new file 'Dialog.qml', adding a few properties, a signal and some functions and we get a reusable standalone component: http://pastebin.com/CSbxrnK3 http://pastebin.com/CSbxrnK3 that is very convinient to use: http://pastebin.com/XKnhW4wN http://pastebin.com/XKnhW4wN result: http://i.minus.com/iGTQhAxP55bBP.gif http://i.minus.com/iGTQhAxP55bBP.gif (3MB gif)
- ricardobeat 13y ago
  How is that better than CSS? http://jsbin.com/ezocec/1/edit http://jsbin.com/ezocec/1/edit (25 lines counting the HTML) CSS has columns and grids, custom text wrapping. These features are available now in >90% of browsers. The `.dialog` class can be used as component without any changes, and we have things like component.io and browserify to package them up with behaviour. result: http://cl.ly/2w1o3h0i1t0r http://cl.ly/2w1o3h0i1t0r
X4 13y ago
Why is such basic css hyped so much? Can someone technically explain it? Is the ratio of HN folks that need Web 101 greater than the ratio of people who need Startup advice, including technical and architecture solutions? (Been doing dev+webdev for >13y)
- cbr 13y ago
  This article isn't basic css, it's a discovery of a simpler way to do a somewhat common layout task. But overall your point is fair: HN has a lot of people (including me) with weak front-end skills.
  - X4 13y ago
    Thank you, that was what I wanted to know.
  - Rumudiez 13y ago
    It's not a new discovery. I've been using this for over a year...
BigBalli 13y ago
not sure how people who "know CSS" can work without knowing this...
- izolate 13y ago
  There are other ways to center elems, and once you learn another such way (and it consistently works for you), is there any point in researching alternatives?
spleeder 13y ago
I have written about a much better (IMHO) solution that does not need the height be declared and does not use tables. https://news.ycombinator.com/item?id=6193203 https://news.ycombinator.com/item?id=6193203
lectrick 13y ago
The fact that something so simple needs to be explained as "a thing" or "a trick", many years after HTML5 even came out, feels like a disgusting frontend failure.
unclebucknasty 13y ago
When CSS reached a certain point, using tables for layout suddenly became evil. CSS was like some strange measure of your salt as a frontend dev. Very Emperor's New Clothes type stuff. But, I can remember trying projects with tableless design at that point, and absolutely beating my head against a brick wall attempting things in CSS that required almost zero thought with tables. Then, I'd finally get it right in one browser only to find that it looked like garbage in another. It was like having a toolbox with a hammer that I couldn't use, instead being forced to nail everything with a screwdriver. And it wasn't just that I was accustomed to tables. They were easier and more natural. When you think about it, layout is nearly always grid-like. So, I confess that there were times when I said screw it and reverted to tables. I'd solve problems that weren't working after hours of trying with CSS in literally minutes. And the challenge with CSS is still apparent. Here we are all of these years later, still trying to do something as simple and frequently necessary as center things vertically which, BTW, doesn't work in my stock Android browser. CSS is a bloated, convoluted mess and just too much work for simple things. That's why I have always found it somewhat draconian that people insisted on CSS as if it didn't have its own significant issues. If there were a tag that operated just like tables, but indicated layout or, as I think someone else suggested, a simple attribute to mark a table as layout vs row/column data, most of the semantic/SEO problems could be solved. For that matter, I am not convinced that we should be so bent on having html pull double duty as the source for semantic data and the source for a presentation engine's rendering. Maybe a different approach altogether could be more liberating and efficient on both fronts.
- pedalpete 13y ago
  Though I agree in some respects, I've been a convert of CSS since the beginning. My reason, floats for wrapping elements depending on screen size. You can't do that with a table.
  - unclebucknasty 13y ago
    >floats for wrapping elements depending on screen size Not sure exactly what you mean here. Are you talking about floating divs to wrap elements to the next visual "row" for smaller screen sizes, as in responsive design? Because I don't find this necessary very often in practice, and certainly not nearly as often as the tons of other general layout that's required. Not to mention, of course, that you can still use divs where "needed". BTW, on a side note, the jury is still out on responsive design for me. Or, at least as I have frequently seen it practiced today. For instance, many times a site with sidebars (including nav) will wrap the sidebars on smaller displays such that content, nav, etc. are all lined up in one vertical column. Not very appealing or usable IMO. I really believe that how we treat designing to different formats will change and this responsive wave will pass. And, while I know there are other reasons to wrap elements, I do think responsive design is responsible for a good bit of it.
eagsalazar2 13y ago
OMG, just use a table! It's not semantic but no one will die and your mom will still love you, I promise! And if you are using haml/jade/handlebars whatever it is so insanely easy to create a little mixin or whatever to keep your code clean. Articles about how to do this should be summarized like this: "Vertical centering hard/hacky/messy unless you just put it in a table. So put it in a table". (I do realize the article says this). BTW, regarding the argument about the damage of using tables wrt screen readers, google themselves used tables to layout very basic buttons on their landing page until very recently. If you use it sparingly and just for this purpose, screen readers will do just fine. Now, using tables for other types of layout can and will break screen readers but a full old-school table-based layout is a long way from having a single TD to center stuff.
DigitalSea 13y ago
Pretty nifty trick, but I think undoubtedly the best is the transform 2D method detailed in this CSS-Tricks article: http://css-tricks.com/centering-percentage-widthheight-elements/ http://css-tricks.com/centering-percentage-widthheight-eleme... — You don't need to know the height or the width, and the great thing is transform2d's are supported in most browsers that matter. If you're smart and have dropped IE8 support, then all browsers are mostly covered and is definitely a lot nicer/neater than needing a height/width or using display:table and display:table-cell hacks. If IE8 and down matters, then there are polyfills available for this functionality.
blogtechjav 13y ago
this is good
ilovecookies 13y ago
How is this related to hacking now again?
mcgwiz 13y ago
This is interesting but I don't like it. It's a quirky non-idiomatic hack. Using vertical-align/line-height/inline-block is equally-effective and IMHO conceptual and readable/self-documenting. Details: http://jsfiddle.net/uy64k/6/ http://jsfiddle.net/uy64k/6/ This requires no extra markup, but it does require the font-size and line-height to be reset.
wittysense 13y ago
If you use <table>s for layout, you will ignore W3C Validators. If you ignore W3C Validators for one language, you might as well ignore "validation" for all languages. The whole point about semantics is that <div><div><div> and <table><tr><td> have virtues or otherwise because of what they mean. If you complain that the quantity of elements is the same, you're missing the (qualitative) point. Learn what semantics are, and why they're important. Agreement is important; it matters what we call things, because we're the only ones that will call those things what they should be called.
lwhi 13y ago
I came up with a similar solution a while back [1] [1] http://stackoverflow.com/questions/5009864/using-all-four-positioning-parameters-with-positionabsolute-is-this-acceptabl http://stackoverflow.com/questions/5009864/using-all-four-po...

526 points by nvk 13y ago

I have just started doing web programming in the last month after several years of applications programming. It feels like to me, and someone please tell me why I'm wrong, that the amount of hackery that goes into making webpages look the way web designers want them to is astounding. I google for solutions to various problems and the top rated comment on StackOverflow says "...there isn't a good way to do this in CSS, but here is this hack...". I feel like somewhere in the universal programming ether there exists a beautiful unification of HTML, CSS, and JS that doesn't rely on any ugly hackery, and it's just waiting to be found and start a brave new world of web programming...

deleted 13y ago
[deleted]
- dm2 13y ago
  And no longer have to support IE7 (if you're lucky).
kmfrk 13y ago
90% of webdesign is dealing with errant behaviour. It's why it's so frustrating when people treat front-end design with disdain as something trivially easy. Of course, if you only decide to serve the newest version of Chrome and Safari, it can be easy to remember that there people out their who don't - or can't use them.
- syncerr 13y ago
  > webdesign It's web development you're referring to.
  - jiggy2011 13y ago
    Without wishing to descend too much into semantics the accepted definitions (at least within the industry) seem to be that "design" is basically Graphics/Layout (so includes HTML/CSS) and development is programming (either client or server side).
    - matthewmacleod 13y ago
      I don't agree. Design is design, development is split into front- and back-end specialisations. Some developers straddle both, but there are few people who are both (good) designers and developers. I don't know of anybody within the industry who would refer to a front-end developer as a "designer."
      - jiggy2011 13y ago
        It depends if you are programming or simply describing page layout. Front end development could also include things like Javascript. There are plenty of designers who are not Javascript programmers but who can use CSS etc.
    - simonw 13y ago
      HTML and CSS are programming.
      - jiggy2011 13y ago
        You could probably argue that in a technical sense but it's a person who works with HTML/CSS but not say JS etc would probably be considered a designer more than a programmer.
        simonw 13y ago
        I've worked at a bunch of different companies (Yahoo!, The Guardian, various smaller companies) and in all of them the "designers" were the people who did the visual design using Photoshop and Illustrator - those people rarely if ever wrote HTML and CSS, and almost never to production level standards. The people writing production-ready HTML and CSS were known as "web developers" or "client-side/front-end engineers".
ams6110 13y ago
Purists will attack if you do this, but if you just want to get something done, using tables for layout often solves a lot of these headaches. Horizontal and vertical alignment of left, right, center, top, middle, bottom are quick and easy. Edit: since you are a new developer, let me add that "ugly hackery" is what you quickly arrive at once you start doing anything of reasonable complexity (read: stuff that's actually useful). Handling the edge cases is what consumes most of the code in real production applications, and this is conveniently omitted from the beautifully clean code presented in tutorials and examples.
thurn 13y ago
We're working on solving these problems with new tools (flexbox in this particular case), but it takes time for those tools to become widely usable. You can look at e.g. Google's Polymer project for a glimpse at the vision for web programming in the future.
dsego 13y ago
Some would argue that whole doing the web with markup and stylesheets thing is completely wrong (Bret Victor comes to mind). And I tend to agree. CSS is a hack, heck, HTML itself is a hack. Some material: http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-sucks http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-... http://diveintohtml5.info/past.html http://diveintohtml5.info/past.html
blhack 13y ago
I'd love to know why just using tables is wrong. The user gets what they want, the designer gets what they want, and the only people unhappy are some purists. why? what about this is wrong?
- chrislomax 13y ago
  I'm no purist but I am in the mindset, "you wouldn't use a fork to eat soup". I do agree though that it is a pain when something is easily achievable in tables but doesn't work in normal CSS. Vertical alignment being one of them. What does annoy me is when you see people creating "CSS table" systems. I'm not being funny but that is just plain stupid. I saw a whole project dedicated to replicating the behaviour of a table. I started developing when tables were fine to use for all layouts and I feel CSS was adopted as a layout too early without some very basic things being answered.
- wmkn 13y ago
  If it solves your problem there is nothing wrong with it. However, tables are considered problematic because they encode the layout of the page in the HTML. Ideally, you would semantically structure your page using HTML and add style and layout using CSS. This way of working would allow for maximum flexibility - you can restyle your page without ever touching the HTML. If you use tables it becomes much more difficult because the table already adds a certain fixed layout. Unfortunately the real world hardly ever works like this.
  - ahallock 13y ago
    I think people have gone too far with this mindset. I develop pages using a mostly semantically structured approach, but I'm not afraid to sprinkle layout-only elements where they make sense, especially when using grids.
- jsiarto 13y ago
  Tables are for tabular data--designing with HTML/CSS isn't perfect, but using tables for layout is an even less-elegant solution. It leads to a markup soup of nested tags and tables and difficult-to-maintain codebase. Good design and good markup go hand-in-hand and often you need to strike a balance between flashy visual design and solid underlying structure. This is also why visual designers should understand how their designs get implemented in HTML and CSS--it will create a restraint and limit the amount of "hacks" you have to do to make a design work. Also remember that not everyone views the web in a browser. Having well structured markup helps those that use screen readers or alternate methods of browsing the web.
crazygringo 13y ago
As someone who's done an insane amount of front-end programming, you're entirely right. Sometimes I wish I could get back all the brain cells that I've wasted on the hundreds of "little tricks" you need to know to get things working -- and then working cross-browser. Short answer: CSS is just a horribly, horribly, terribly badly designed language. It's the absolute worst. Don't let anybody tell you otherwise. It's that, it's what we've got, and it is awfully powerful in many ways. But it's complete rubbish in others, which include a lot of incredibly basic layout things.
- Skalman 13y ago
  I agree that it's a disaster, but: Is there any better language? I feel that very few of the "native" variants have APIs that are simpler to deal with. (Of course Sass is much better than vanilla CSS, but it's basically the same if you strip away the sugar)
  - sker 13y ago
    XAML is very well designed, not for the web though. It was designed from the ground up to be consistent with only one implementation, as opposed to CSS, which evolved over the years on multiple implementations. It can get quite verbose since it's XML-based, but at least what you code is what you get.
    - platz 13y ago
      I've not built apps in xaml but I've heard the that its a PITA once your app gets to a certain size and complexity.
      - sker 13y ago
        I agree, I just think it's well designed and consistent. Plus, CSS can also be a royal PITA, that's why I take refuge in back-end development when possible.
    - Skalman 13y ago
thekingshorses 13y ago
Just wondering. Why did you decided to become a web developer after so many years? Usually developers try to find a way to solve the problem because they are engineers and that is what engineers should do. HTML, CSS and JS wasn't invented to what it has become today. It has evolved thanks to people like you and me who has find ways to use to our advantage. Example AJAX was existed since dark ages (IE5+) but no one used/knew about it. Google used that in google maps in 2004. Now, pirates are using it in usenet/torrent applications (utorrent, sabnzbd, sickbeard etc), or 3d rendering in the cloud (http://home.lagoa.com/ http://home.lagoa.com/). If you are waiting for something better to be found, i think you will have to wait long time. There is nothing on horizon that is as simple as HTML. For me, hardest part is in the web development is to deal with designers and product managers.
- gamegoblin 13y ago
  I'm not a web developer. I just wanted to add a bit of web development skills to my set of abilities so I've been learning the Django framework and the nuances of HTML/CSS/JS.
bane 13y ago
It's absolutely stupid and frustrating. Almost nothing in modern web design just works and it's because of both a badly written standard and badly written implementations. I get it that HTML is supposed to be for content, CSS for layout and JS for programmatic logic, but the house of cards, duct tape, bailing wire and chewing gum that goes into making a web application is astonishing. I almost think it would be easier for somebody to come up with an entirely different "web application/dynamic document layout" technology stack with a sane and well-working model all the way through, so that stupid basic things like vertical alignment don't go unfixed year after year after year and we end up with the teetering tower of hacks we have today. We pretty much know what we want out of the web, somebody should just go build it from top to bottom all over again and throw out the huge train wreck we have to deal with today. Sure it would take a while to catch on, but I bet a more efficient set of tools and display environments would rapidly catch on. We've done it before and replaced older broken technologies with newer, why not do it again?
- lutusp 13y ago
  > I almost think it would be easier for somebody to come up with an entirely different "web application/dynamic document layout" technology stack with a sane and well-working model all the way through, so that stupid basic things like vertical alignment don't go unfixed year after year after year and we end up with the teetering tower of hacks we have today. Yes, but if someone managed to create a logical, concise Web publishing standard that was something other than a can of worms, it would be a proprietary system, most likely patented. Which means no one would voluntarily adopt it. The advantage of a public, open-source, no-one-in-charge system like we have now is that it's collaborative, democratic, and free. That's also its disadvantage. For a classic counterexample, look at Apple's products -- they create much more consistent and usable products than the rest of the marketplace. But as many have said, Apple is a walled garden. If an Apple product happens to do what you want with no changes, then fine, otherwise you're out of luck. Freedom is messy. Democratic technology seems always to veer toward chaos.
  - bane 13y ago
    I wonder if this is a result of a broken committee process that should have had a benevolent dictator in charge of it instead.
CmdrKrool 13y ago
My journey: See this well trafficked "CSS sucks"-type article, Ctrl-F the comments for John Nagle, be tantalized at the hints of how it could be so much better: http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-sucks/ http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-... Look up "constraint-based layout" and more specifically "constraint cascading style sheets". You'll find papers such as this one: http://citeseer.ist.psu.edu/viewdoc/summary?doi=10.1.1.101.4819 http://citeseer.ist.psu.edu/viewdoc/summary?doi=10.1.1.101.4... and this one: http://csis.pace.edu/~marchese/CS835/Lec7/mmJournal.pdf http://csis.pace.edu/~marchese/CS835/Lec7/mmJournal.pdf thoroughly describing such a system. Find "GSS - Grid Style Sheets" at http://gridstylesheets.org/ http://gridstylesheets.org/ , "an implementation of Badros & Borning's Constraint Cascading Style Sheets". This is still half on my todo list, but it seems like the real thing. The catch? Relies on Javascript. Dream of a world in which this kind of system was built into browsers as the primary way of doing layout <insert Simpsons happy dancing people gif here>.
- cousin_it 13y ago
  Best comment in this thread IMO. Thanks! Some key parts from John Nagle's comments: It’s not that CSS is hard; it’s that CSS is bad. (...) The worst problem with DIV-based layout is that the layout system is too weak. (...) There’s no way to relate a DIV to anything but its predecessor, its parent, or an absolute position. (...) Table layouts allow table cells which span multiple rows and columns. If all tables could do were simple grids of cells, the CSS approach might make sense, but tables are more general than that.
rimantas 13y ago
Be glad you did not have to do this when IE5/6 was still around and Firefox was starting to go strong. Sites with sole purpose todocument all the hacks you need to do to force IE to behave a still around.
dylan-m 13y ago
One of the problems is we often have people doing web design was if it's print design. Find yourself a focused web designer who really understands the medium and, chances are, you won't run into this sort of problem. A good web designer understands that different browsers are going to have different capabilities, and build graceful degradation into the design. A good web designer knows that screens come in all shapes and sizes, and will avoid raster graphics and px-units wherever possible. CSS, from my experience, makes it very easy to do web design the right way and very hard to do it any other way. It's just that the right way is often a little different from what people expect. If you accept that <i>the browser is the boss</i>, you'll be a lot happier, and incidentally your users will be a lot happier as well. The trouble is people coming from other platforms or mediums often expect 100% control, and for that it really doesn't hold your hand.
chestnut-tree 13y ago
"...the amount of hackery that goes into making webpages look the way web designers want them to is astounding." I totally agree. For example, the CSS box model sounds so simple and elegant at first, but when you add dozens of styles and elements to your page, the interaction between different styles can quickly become horribly messy no matter how disciplined you are with your CSS code. Beyond a certain number of styles, CSS inheritance turns into a black art. CSS simply doesn't scale well for anything beyond relatively simple pages. A huge part of designing web pages is layout and spacing and yet positioning and spacing elements remains ridiculously messy and convoluted (even with CSS3). You could also argue that tools like SASS and LESS are in effect sticking-plasters for inadequacies in CSS. I know hindsight is a wonderful thing, but if we were designing CSS today from scratch, I think it would be designed very differently.
- babby 13y ago
  CSS could be redeemable if; the box model defaulted to box-sizing: border-box;. If vertical-align and margin: auto (or variants) worked with variable heights and widths, and on all elements. If percentages of heights worked inside all elements. It seems like flex-box fixes a lot of this, but at the same time, it could be so much easier. You're right though. CSS would be so much different and so much more gloriously painless to use. I can even imagine a better styling engine allowing for applications like macaw, dreamweaver to actually generate properly good CSS and thus building sites with a GUI would finally be plausible.
steveax 13y ago
We sorta had that already. It was called Flash (or Silverlight, etc. pick your poison) and while it was easier for authors to do many things, it sucked for users in more ways than I can count.

the_cat_kittles 13y ago

Very nice. When I actually stop to think about it, it's amazing to me that this is not immediately easy to do. Things like this give credence to Bret Victor's most recent talk.

deleted 13y ago

[deleted]

msujaws 13y ago

We use this same technique in Firefox to center images when viewing them standalone, inspect http://www.elizabethtownfamily.com/wp-content/uploads/2012/09/African_Elephant_Transparent.png http://www.elizabethtownfamily.com/wp-content/uploads/2012/0... to see for yourself :)

ghostdiver 13y ago

What is performance loss/gain compared to Javascript solution of this problem?

ashray 13y ago
There's an infinite performance gain for browsers that have javascript turned off or use noscript. Other than that, I'd say that doing this kind of stuff in CSS would by default be much faster in a web page context.
- ghostdiver 13y ago
  What if I don't want fixed dimensions? Maybe media queries could help a bit, but Javascript usage seems to be inevitable. ps. I didn't mean pure javascript solution anyway:)
  - erichurkman 13y ago
    If you don't care about older browsers [1], you can use Flexbox to do all sorts of dynamic, fluid positioning. [1] http://caniuse.com/flexbox http://caniuse.com/flexbox - it's in the current version of all browsers (some still prefixed).

ForFreedom 13y ago

Why do you need this to center a box in css? It can be done without this too.

jiggy2011 13y ago

It confuses me that you have to specify things in terms of margins, I understand how that is technically correct but surely something like alignment: center should just align to the center of the parent element? I've spent hours in the past the past getting correct centring behaviour in CSS, then tried by just putting the whole thing inside <center></center> and had it work immediately in all browsers. But apparently that's "cheating".

null_ptr 13y ago
Cheating according to who? Surely not your website's users? It's the standards makers' fault. Needing to center something on either the x or y axis relative to the parent is as common a scenario as you can get.
- jiggy2011 13y ago
  Well technically the center tag is deprecated so any browser could simply drop support for it (as they did with <blink> in a future version and break the site.

crazygringo 13y ago

Just in case anyone's unaware... it's entirely possible to vertically center elements of variable height too in pure CSS... it's just "unsemantic", because it relies on the fact that only table cells have "vertical-align:middle". But that's how I center every one of my "modal dialogs" on a site -- the whole modal dialog is inside a <table> with position:fixed and top/bottom/left/right:0. Then, just give the <td> a "vertical-align:middle", and then put your desired visible dialog <div> inside it. It's annoying to have to wrap something inside of a <table><tr><td> just to vertically center something, but it sure beats using JavaScript to do it. (You might be able to do it just with the display:table-cell property too, but it's been a long time since I checked browser compatibility.)

bhauer 13y ago
At least in every browser I've tested, display:table-cell works, as long as that is inside another element with display:table. This allows one to retain pedantic purism of all divs.
- syncerr 13y ago
  It's not as big a deal anymore, but table-cell is not supported in IE6-7. http://caniuse.com/css-table http://caniuse.com/css-table
  - gcb0 13y ago
    >not a big deal Browser still has more users than Firefox had some years ago when we started talking about supporting all browsers. Unfortunately.
    - w1ntermute 13y ago
      It's funny how so many web devs just ignore older browsers out of a sense of superiority towards users of those browsers. I've even heard some of these guys say "they're not my target audience, so why should I care?" They are, of course, inevitably, Apple fanbois. Fortunately, they are not usually in charge of making business decisions at any significant companies.

hayksaakian 13y ago

Does it seem a bit off to anyone else in chrome? http://www.imgur.com/7JA69Ty.png http://www.imgur.com/7JA69Ty.png Or is the browser chrome considered usable real estate.

arxpoetica 13y ago
Looks good to me...
systemtrigger 13y ago
You are correct, it is off by the height of the bar at the bottom of the window. It uses fixed positioning -- not absolute positioning as was prescribed in the hack. Also he sets the modal height to 50%. The CSS of the demo is not the CSS of the write-up.
- enyaboi 13y ago
  This !!!! You can also do this position: relative; margin-top: 50%; transform: translateY(-50%);
  - systemtrigger 13y ago
    You can, if you don't mind it breaking in IE < 9.

hpaavola 13y ago

It's a shame that we need to hack layouts to work with language designed for changing fonts and colors.

mkl 13y ago

I haven't done any front end web work so I'm confused by this. Can someone please explain why it is noteworthy? It seems strange to me that something as simple as centring a box should require special attention. Why aren't such tasks trivial beginner stuff?

steveax 13y ago
Centering content of unknown dimensions (and since the user is ultimately in control of font size this happens often) vertically is surpringly difficult to do if you want to support legacy browsers. It's a common pain point. There are others, but this one is particularly vexing (esp. to newcomers to CSS) because it seems, at first glance, like it should be easy.

jafaku 13y ago

Can someone paste the code somewhere else please? The linked website is broken. And yes, I have Javascript enabled. But it's probably using localStorage (with no graceful degradation), which I won't allow. Is this becoming a thing? Either you give up your privacy, or you can't surf the web anymore?

systemtrigger 13y ago
margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; The JavaScript console error I see is: Blocked a frame with origin "http://s.codepen.io" from accessing a frame with origin "http://codepen.io". Protocols, domains, and ports must match. localStorage.keys is null, thus the page does not appear to be using localStorage. How is localStorage a significant privacy concern? My understanding is that websites only have access to the keys stored by that particular domain.

marizmelo 13y ago

There is anything new here ?

pbreit 13y ago

Vertically centering dialog boxes in a window is a minor pet peeve of mine. Boxes should be slightly above center. If I recall correctly, the original Mac UI guidelines specified that the midpoint of the box should be 1/3 the distance from the top.

marcolz 13y ago

Those CSS class names are unacceptable. (:grin:)

oakaz 13y ago

It's still impossible if you'd like to center a div that resizes itself depending on the content.

emn13 13y ago
nope, consider: http://codepen.io/KatieK2/pen/ucwgi http://codepen.io/KatieK2/pen/ucwgi or http://jsbin.com/uqutol/3/edit http://jsbin.com/uqutol/3/edit These have intrinsically sized (autosized) boxes that vertically and horizontally center in some container.

namuol 13y ago

Don't forget to sacrifice at least one goat, if you want cross-platform, standards-compliant code.

stesch 13y ago

Doesn't work with NoScript. Bad example.

cbr 13y ago
Huh? This solution doesn't use any javascript.
- dredmorbius 13y ago
  Regardless, with ScriptSafe (Chrome) enabled, all I see is a blank page. I've got to enable assets. and s.codepen.io to see the page rendered. That appears to be due to the use of an iframe from s.codepen.io for the content.

candl 13y ago

HTML/CSS is generally quite flexible when it comes to operations on text. No surprise since it was its intended purpose to be a format for documents. Making any layouts and god forbid centering elements has always been a headache for me. Even by looking at the CSS examples provided by the link my first thought is how random they all seem and how ugly they are not to mention difficult to remember and use. There should be a single way to center an element. It should be an obvious operation given how important and common it is. Some very useful CSS properties might take a lot of code and be hard to implement in native GUI toolkits like floats, overflow, height/width with percents, text wrapping etc. This is a sweet spot where HTML/CSS shines. I have been playing with QML lately and decided to implement the Dialog (Absolute center within viewport) that pops after visiting the linked page just for comparison: Here's the dialog equivalent that just fills the entire screen of an application done with QtQuick 2.0 for Desktop. http://pastebin.com/mnN3Zr6N http://pastebin.com/mnN3Zr6N Layouting is easily done by anchors. Filling a rectangle to match a parent's container, centering an element inside a parent, etc. Other containers such as Rows, Columns or Grids are also provided. Property bindings are used for centering the dialog even if the viewport changes. Text wrapping is also done explicitly and binding was necessary to limit text width to the ScrollView for it to work. One big difference compared to CSS is that by looking at the source I can see at glance what the layout structure is and what might be happening with the element. Another cool thing about QML is that it's as simple as taking the code, creating a new file 'Dialog.qml', adding a few properties, a signal and some functions and we get a reusable standalone component: http://pastebin.com/CSbxrnK3 http://pastebin.com/CSbxrnK3 that is very convinient to use: http://pastebin.com/XKnhW4wN http://pastebin.com/XKnhW4wN result: http://i.minus.com/iGTQhAxP55bBP.gif http://i.minus.com/iGTQhAxP55bBP.gif (3MB gif)

ricardobeat 13y ago
How is that better than CSS? http://jsbin.com/ezocec/1/edit http://jsbin.com/ezocec/1/edit (25 lines counting the HTML) CSS has columns and grids, custom text wrapping. These features are available now in >90% of browsers. The `.dialog` class can be used as component without any changes, and we have things like component.io and browserify to package them up with behaviour. result: http://cl.ly/2w1o3h0i1t0r http://cl.ly/2w1o3h0i1t0r

X4 13y ago

Why is such basic css hyped so much? Can someone technically explain it? Is the ratio of HN folks that need Web 101 greater than the ratio of people who need Startup advice, including technical and architecture solutions? (Been doing dev+webdev for >13y)

cbr 13y ago
This article isn't basic css, it's a discovery of a simpler way to do a somewhat common layout task. But overall your point is fair: HN has a lot of people (including me) with weak front-end skills.
- X4 13y ago
  Thank you, that was what I wanted to know.
- Rumudiez 13y ago
  It's not a new discovery. I've been using this for over a year...

BigBalli 13y ago

not sure how people who "know CSS" can work without knowing this...

izolate 13y ago
There are other ways to center elems, and once you learn another such way (and it consistently works for you), is there any point in researching alternatives?

spleeder 13y ago

I have written about a much better (IMHO) solution that does not need the height be declared and does not use tables. https://news.ycombinator.com/item?id=6193203 https://news.ycombinator.com/item?id=6193203

lectrick 13y ago

The fact that something so simple needs to be explained as "a thing" or "a trick", many years after HTML5 even came out, feels like a disgusting frontend failure.

unclebucknasty 13y ago

When CSS reached a certain point, using tables for layout suddenly became evil. CSS was like some strange measure of your salt as a frontend dev. Very Emperor's New Clothes type stuff. But, I can remember trying projects with tableless design at that point, and absolutely beating my head against a brick wall attempting things in CSS that required almost zero thought with tables. Then, I'd finally get it right in one browser only to find that it looked like garbage in another. It was like having a toolbox with a hammer that I couldn't use, instead being forced to nail everything with a screwdriver. And it wasn't just that I was accustomed to tables. They were easier and more natural. When you think about it, layout is nearly always grid-like. So, I confess that there were times when I said screw it and reverted to tables. I'd solve problems that weren't working after hours of trying with CSS in literally minutes. And the challenge with CSS is still apparent. Here we are all of these years later, still trying to do something as simple and frequently necessary as center things vertically which, BTW, doesn't work in my stock Android browser. CSS is a bloated, convoluted mess and just too much work for simple things. That's why I have always found it somewhat draconian that people insisted on CSS as if it didn't have its own significant issues. If there were a tag that operated just like tables, but indicated layout or, as I think someone else suggested, a simple attribute to mark a table as layout vs row/column data, most of the semantic/SEO problems could be solved. For that matter, I am not convinced that we should be so bent on having html pull double duty as the source for semantic data and the source for a presentation engine's rendering. Maybe a different approach altogether could be more liberating and efficient on both fronts.

pedalpete 13y ago
Though I agree in some respects, I've been a convert of CSS since the beginning. My reason, floats for wrapping elements depending on screen size. You can't do that with a table.
- unclebucknasty 13y ago
  >floats for wrapping elements depending on screen size Not sure exactly what you mean here. Are you talking about floating divs to wrap elements to the next visual "row" for smaller screen sizes, as in responsive design? Because I don't find this necessary very often in practice, and certainly not nearly as often as the tons of other general layout that's required. Not to mention, of course, that you can still use divs where "needed". BTW, on a side note, the jury is still out on responsive design for me. Or, at least as I have frequently seen it practiced today. For instance, many times a site with sidebars (including nav) will wrap the sidebars on smaller displays such that content, nav, etc. are all lined up in one vertical column. Not very appealing or usable IMO. I really believe that how we treat designing to different formats will change and this responsive wave will pass. And, while I know there are other reasons to wrap elements, I do think responsive design is responsible for a good bit of it.

eagsalazar2 13y ago

OMG, just use a table! It's not semantic but no one will die and your mom will still love you, I promise! And if you are using haml/jade/handlebars whatever it is so insanely easy to create a little mixin or whatever to keep your code clean. Articles about how to do this should be summarized like this: "Vertical centering hard/hacky/messy unless you just put it in a table. So put it in a table". (I do realize the article says this). BTW, regarding the argument about the damage of using tables wrt screen readers, google themselves used tables to layout very basic buttons on their landing page until very recently. If you use it sparingly and just for this purpose, screen readers will do just fine. Now, using tables for other types of layout can and will break screen readers but a full old-school table-based layout is a long way from having a single TD to center stuff.

DigitalSea 13y ago

Pretty nifty trick, but I think undoubtedly the best is the transform 2D method detailed in this CSS-Tricks article: http://css-tricks.com/centering-percentage-widthheight-elements/ http://css-tricks.com/centering-percentage-widthheight-eleme... — You don't need to know the height or the width, and the great thing is transform2d's are supported in most browsers that matter. If you're smart and have dropped IE8 support, then all browsers are mostly covered and is definitely a lot nicer/neater than needing a height/width or using display:table and display:table-cell hacks. If IE8 and down matters, then there are polyfills available for this functionality.

blogtechjav 13y ago

this is good

ilovecookies 13y ago

How is this related to hacking now again?

mcgwiz 13y ago

This is interesting but I don't like it. It's a quirky non-idiomatic hack. Using vertical-align/line-height/inline-block is equally-effective and IMHO conceptual and readable/self-documenting. Details: http://jsfiddle.net/uy64k/6/ http://jsfiddle.net/uy64k/6/ This requires no extra markup, but it does require the font-size and line-height to be reset.

wittysense 13y ago

If you use <table>s for layout, you will ignore W3C Validators. If you ignore W3C Validators for one language, you might as well ignore "validation" for all languages. The whole point about semantics is that <div><div><div> and <table><tr><td> have virtues or otherwise because of what they mean. If you complain that the quantity of elements is the same, you're missing the (qualitative) point. Learn what semantics are, and why they're important. Agreement is important; it matters what we call things, because we're the only ones that will call those things what they should be called.

lwhi 13y ago

I came up with a similar solution a while back [1] [1] http://stackoverflow.com/questions/5009864/using-all-four-positioning-parameters-with-positionabsolute-is-this-acceptabl http://stackoverflow.com/questions/5009864/using-all-four-po...