3 ms·

> No you don't. There are well-documented, consistent ways to centre in CSS. Vertical entering used to be difficult (for obvious reasons), but now we've got fle

by sltkr 11y ago

> No you don't. There are well-documented, consistent ways to centre in CSS. Vertical entering used to be difficult (for obvious reasons), but now we've got flexbox which solves that problem entirely. So, what's the way to put something in the center?

iopq 11y ago
 and then you center things
0x4a42 11y ago
Pick the one that you find the more "sane": /* method1: flexbox hack */ .container { display: flex; /* opt into the new box model */ justify-content: center; /* "align" */ align-items: center; /* "valign" */ } /* method2: table hack */ .container { display: table-cell; text-align: center; vertical-align: middle; } /* method3: translate hack */ /* hack to fix bad rendering */ .container { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } /* center me */ .element { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } etc...
- swhipple 11y ago
  Just to add to your post, the reason that there are multiple ways to "center something" is because tables and flexboxes have different behaviors, especially for multiple children, and the third case of arbitrary translation, but all can be made to give the same visual effect here -- the specific case of aligning and valigning a single child to the center of the parent. In my experience though, the flexbox model is the only example of DWIM in the majority of cases (the only surprise I've had was some situation with an overflowed child inside of a flexbox and requiring an explicit min-height: 0 [1]... something that seemed unintuitive, but modern browsers are beginning to support uniformly). [1] https://code.google.com/p/chromium/issues/detail?id=506893 https://code.google.com/p/chromium/issues/detail?id=506893

by sltkr 11y ago

iopq 11y ago

and then you center things

0x4a42 11y ago

Pick the one that you find the more "sane": /* method1: flexbox hack */ .container { display: flex; /* opt into the new box model */ justify-content: center; /* "align" */ align-items: center; /* "valign" */ } /* method2: table hack */ .container { display: table-cell; text-align: center; vertical-align: middle; } /* method3: translate hack */ /* hack to fix bad rendering */ .container { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } /* center me */ .element { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } etc...

swhipple 11y ago
Just to add to your post, the reason that there are multiple ways to "center something" is because tables and flexboxes have different behaviors, especially for multiple children, and the third case of arbitrary translation, but all can be made to give the same visual effect here -- the specific case of aligning and valigning a single child to the center of the parent. In my experience though, the flexbox model is the only example of DWIM in the majority of cases (the only surprise I've had was some situation with an overflowed child inside of a flexbox and requiring an explicit min-height: 0 [1]... something that seemed unintuitive, but modern browsers are beginning to support uniformly). [1] https://code.google.com/p/chromium/issues/detail?id=506893 https://code.google.com/p/chromium/issues/detail?id=506893