Responsive Foundation 6.0.0

A mixin for vertically and horizontally centering all children in modern browsers using flexbox.

Use this mixin when centering isn't critical to usability. Older browsers will gracefully degrade and not center. This mixin should be used on the parent of the elements you want to center.

By default, this is set to work as-is for most use cases, but you may be interested in tweaking the parameters if you want flexbox-specific functionality.

Examples

Center all elements in a callout for modern browsers.

			.callout {
					@include center-children;
				}
				Center all elements in a callout for modern browsers,
			but let flexbox decide the width for each child item.
					.callout {
					@include center-children( center, center, nowrap, center );
				}