3 ms·
Although it was a little late to the party, flexbox solves a bunch of issues with css layouts. Here's a working example that doesn't use tables: https://jsfidd
by rgro 12y ago
Although it was a little late to the party, flexbox solves a bunch of issues with css layouts.
Here's a working example that doesn't use tables: https://jsfiddle.net/q8zxxr3b/ https://jsfiddle.net/q8zxxr3b/
Or, here's the inline example:
<div style="display: flex; height: 100%; flex-direction: column; align-items:center; justify-content: center;">
<div style="text-align: center;">
<h1>Hello world</h1>
The following green square should be centered:<br />
<div style="display: inline-block; width: 30px; height: 30px; background: green;"></div>
</div>
</div>
- lisper 12y agoNo, you have to vertically center it as well. Horizontal centering is fairly easy even with flex-box.
- simcop2387 12y agoThis does appear to be vertically centering it, at least in Firefox.
- sim0n 12y agoThat does vertically center the content.
- nostrademons 12y agoVertically centered on Chrome Mac as well. Safari (and IE) still requires a vendor prefix to use flexbox, but with that added, it works in Safari as well: https://jsfiddle.net/k281a8v0/ https://jsfiddle.net/k281a8v0/
- lisper 12y agoCongratulations, yours is the first solution I've seen that actually works.