replace `center` with more general one

[ismamz]

replace `center` with more general one

[ismamz]

Great idea! Could you detail for all the cases what would be the resulting code?

[revyh]

yeah, sure. It's tedious to list resulting code for all 16 possible combinations of [horizontal] and [vertical]. So, I'll write results for [horizontal] and [vertical] in separate. I think it would be enough to clarify the idea.

/* [horizontal] == left */
position: absolute;
left: 0;

/* [horizontal] == center */
position: absolute;
left: 50%;
transform: translateX(-50%);

/* [horizontal] == right */
position: absolute;
right: 0;

/* [horizontal] == fill */
position: absolute;
left: 0;
right: 0;

/* [vertical] == top */
position: absolute;
top: 0;

/* [vertical] == center */
position: absolute;
top: 50%;
transform: translateY(-50%);

/* [vertical] == bottom */
position: absolute;
bottom: 0;

/* [vertical] == fill */
position: absolute;
top: 0;
bottom: 0;

Also, I'd like to add outer-* values:

/* [horizontal] == outer-left */
position: absolute;
right: 100%;

/* [horizontal] == outer-right */
position: absolute;
left: 100%;

/* [vertical] == outer-top */
position: absolute;
bottom: 100%;

/* [vertical] == outer-bottom */
position: absolute;
top: 100%;

The only problem with outer-* values is that they can't be implemented with flexbox (or at least I don't know how to do this).

To be honest, I don't think that centerMethod option was a good idea. Because flexbox operates on element's children and position: absolute operates on element itself. They aren't interchangeable. It doesn't really matter when you write code, because there is no big difference where you put @util center: in a child or in a parent. But if you will decide to move from "transition" method to "flexbox" you will find that you can't just change centerMethod: transform to centerMethod: flexbox and expect that your code will use flexbox now. You'll should manually move all @util center from child to parent. So, I don't see any advantages of centerMethod in front of two explicit and separated utils (align for "transform" method and align-children for "flexbox" method). Also, if you agree to add outer-* values to align then align and align-children will have different capabilities and it will be nice to have access to both of them in code.