5 ms·
How to Center in CSS
- tln 10y agoWith flexbox?
- hoodoof 10y agoThis is the real answer. If you haven't yet embraced Flexbox then do yourself a favor and get on board, it's awesome.
- girzel 10y agoI'm in the midst of a (long, long overdue) redesign on the principle site I maintain, and just discovered flexbox. It's kind of jaw-dropping how much simpler it makes everything. Flexbox plus box-sizing: border-box allowed me to solve in about fifteen minutes layout problems that had previously taken me a few days and poking and Googling and cursing.
- h1fra 10y agoOnly if you ignore all audience on IE maybe
- minimaxir 10y agoFlexbox is supported in IE11, but unsupported in IE10 and lower: http://stackoverflow.com/questions/18019450/css-flexbox-not-working-in-ie10 http://stackoverflow.com/questions/18019450/css-flexbox-not-... And since IE10 is EOL, it is fair to drop support for that.
- hoodoof 10y agoI am in the enviable position of being able to say "Not using a modern browser, sorry, my site is not for you. Upgrade to a latest browser or leave." That does make using Flexbox a whole lot easier. Having said that, Bootstrap 4 has optional Flexbox.
- zeta0134 10y agoI'm completely on board with ignoring IE at this point. Even Microsoft is through with it. With its declining market share and quickly expiring install base (Vista kicks the bucket next year, 7 in 2020) the benefit of mangling my codebase to support the dying browser just isn't worth the cost to me anymore.
- ryannevius 10y agoThat's one of the results that is returned if you select a version of IE that supports flexbox.
- cjcenizal 10y agoYup! I made flexboxpatterns.com, which contains many examples related to centering. Flexbox + PostCSS for cross-browser support and you're good to go.
- hoodoof 10y agoI have checked your work out, I like it. Go further.....there's a real opportunity for someone to build deep and wide Flexbox development tools, which just don't exist right now.
- mattmurdog 10y agoHow about also including ie9 fallbacks?
- ConAntonakos 10y agoWhoa! Nice job!
- cjstewart88 10y agoI would add some errors or indications of what's required before submitting.
- noer 10y agoOr some help text on what's required. Or some inline validation?
- shaneofalltrad 10y agoGenerate Code button not working? I am using Chrome on Ubuntu OS
- oolongCat 10y agoOpen the console window on chrome, it displays why it wont generate the code. In my case, I didn't specify a value for H and V ALIGNMENT and I got "bundle.min.js:3 Uncaught Invariant Violation: No horizontal alignment" Love this website nevertheless.
- Animats 10y agoYes. Error: No vertical alignment bundle.min.js:3 It was easier with tables.
- jakubp 10y agoCan someone explain to me what is this for if selecting 4 x unknown in all questions leads to this? <div style="margin-left:auto;margin-right:auto;"> (DIV) <div style="text-align:center;">Text Content</div> (TEXT) If this is supposed to work, then by reduction, having more information about height/width is unnecessary for both browser and CSS programmer. Why not just always use those two forms?
- deleted 10y ago[deleted]
- andrewliebchen 10y agoWhat you've posted will only center a `<div>` with a known width (ie, for `margin: auto` to center a child element within its parent, the width of the child must also be specified). Not sure if you're mistaken in your comment or there's a bug in the site. When I select all unknown dimensions and a block-level element, it gives me a flexbox output (the right answer, IMO).
- deleted 10y ago[deleted]
- jakubp 10y agoHm. I never get any flexbox output unless I tick "Vertically: top". Perhaps a bug then.
- devishard 10y agoThis website is needed. The fact that this website is needed for such an extremely common use case is strong evidence that CSS is fundamentally broken.
- iMark 10y agoBut this website should not be needed. This is is fundamental design requirement, and the tools we have are barely up to the task. Flexbox is a good start, but articles like this should be completely redundant.
- tuxracer 10y ago<div style="display: flex; align-items: center;">Hello World</div> This works in the latest versions of all browsers. If you need legacy IE support things may get tricky.
- anotheryou 10y agoand blam, you blew your CSS framework XD
- perseusprime11 10y ago+1. One reason why most front end engineers go not have good CSS skills. No amount of LESS or SASS will fix CSS.
- lawpoop 10y agoTo be technical, css isn't broken-- it's just for styling. Using css for layout was a fundamentally bad idea, but it was the best hack around at the time. And now it's enshrined :/
- icedchai 10y agoOr just use tables like we did in the '90s...
- open-source-ux 10y agoTables are meant for displaying tabular data, they are not meant to be an invisible frame or grid for page layouts but this is what they were often used for. Tables fell out of favour because many people used nested table structures which were messy and inaccessible to people with screen readers. (Note that non-nested tables are not inaccesible to screen readers.) I actually think a table-inspired layout approach for CSS would have been simpler to understand and to implement than the clumsy, messy CSS methods we currently have. Even Flexbox has an over-engineered (or over-complex) feel for some of its rules. Oh well, the benefit of hindsight...
- anexprogrammer 10y agoThe hilarious part is the memo "don't use tables" was so completely absorbed it became rare to see a table even being used for tabular data. A whole slew of CSS to achieve a table-like effect was fairly common to see.
- icedchai 10y agoYay. We replaced one mess (table-based layouts) with another (CSS.) Have you ever view-sourced the pages on this site? Many nested tables...
- gscott 10y agoI use tables then add css styling to them.
- charlesism 10y agoThat reminds of Zed Shaw's angry CSS rant in https://youtu.be/_CEBG_s92P8?t=525 https://youtu.be/_CEBG_s92P8?t=525 It's on the obnoxious side, and has a lot of foul language, but it's interesting.
- mlvljr 10y ago[searches for QML being mentioned]
- amelius 10y agoI can't help but wonder why the committee behind CSS took so long to come up with a reasonable way to center content that works in all cases.
- andrewliebchen 10y agoMaybe because HTML/CSS was intended to lay out and style documents, not support complex application layouts?
- lawpoop 10y agoWhen specifically was CSS explicitly and officially said to be for layout? As I remember, it began as styling, and people started using it for layout, and that became the best practice, though not official. I don't recall the announcement that its design was for layout, but I wasn't keeping up on the news at that point. And since CSS is officially said to be supporting layout, why aren't they thinking of all web use cases? If CSS is not for layout of complex applications, what should one use in that case?
- talideon 10y agoThere's a way to centre variable width block elements that doesn't depend on flexbox, which is: .centred { /* Make the element only as wide as it needs to be. */ display: inline-block; /* Let us apply positioning. */ position: relative; /* Move the left of the element to the middle of the container. */ left: 50%; /* Translate backwards half the width of the block, thus centring it. */ transform: translateX(-50%); } It's a useful bit of CSS to have around.
- crystalmace 10y agoI use a similar trick all the time, especially for vertically centering elements. Also, mine usually includes the various vendor prefixes for the browsers.
- swalsh 10y agoEvery time I need to center a div, I have to google how to do it. I really hope this site ranks above the fold... because i'm going to forget the URL, and in a few months i'm going to google the same stackoverflow answer I search for each time.
- mixmastamyk 10y agoUpvote it and it will be in your list of saved stories.