3 ms·
Pick the one that you find the more "sane": /* method1: flexbox hack */ .container { display: flex; /* opt into the new box model */ justify-conte
by 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 agoJust 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