Vertically centering content within a standard, single-column container is pretty straightforward: apply equal padding to all four sides of the parent container and you’re golden.

But how do you vertically center content within a two-column, 100% height or fixed height setup while still keeping the build scalable?

Applying equal padding to all sides of the parent container only works when dealing with a predictable, essentially fixed, height for the content. 50/50 positioning is our go-to solution.

Let’s look at a standard layout type: a two-column Venue Block, where a series of venue elements are positioned adjacently to a Mapbox element.

You could accomplish this by applying a specific amount of padding to the left container that holds the venue information - let’s say, 12% top padding. But what happens if the venue name extends to two or even three lines? The content would no longer be positioned in the vertical center of the column.

This example doesn’t look bad in this particular instance, but it’s not our design intent. There’s also a greater chance that the content may “spill” over the confines of the parent container if the venue name’s font size is even marginally larger, because of the fixed top padding.

Now, the venue name’s font size is admittedly too large to be a scalable style for long venue names. However, using 50/50 positioning, even this oversized text stands a greater chance of fitting within its parent container.

Let’s break down our setup.

In order to employ 50/50 Positioning, we first need to change the position type for both our content and its parent container.

Our venue information is actually made up of two separate venue elements, so we’ll need to wrap those elements in their own container, which we’ll rename Content Wrapper.

So, to clarify, we’ll be applying 50/50 Positioning to our Content Wrapper within the parent Text Container.

The Position Type type for the Parent Container must be set to Absolute. Because we would like our parent container to remain aligned, we’ll position it 0px from the top, left, and bottom.

The position type for the inner content container can either be set to Absolute or Relative.

Here's the key:

• An absolutely positioned inner container will not respect the padding on the parent container (in which case padding must be applied to the inner container, or the elements will extend to the edge of the parent)
  
  
• A relatively positioned inner container will respect the padding on the parent container.

For the purposes of this demonstration, let’s choose Relative positioning for the inner container.

We’re going to position our inner container 50% from the top of the parent, and 0px from the left and the right. Entering a value of 0 for both the left and right values ensures our inner container also remains horizontally centered.

So, we’ve tackled the first part of 50/50 Positioning, but why isn’t placing the inner container 50% from the top enough to guarantee that it remains in the vertical center?

That 50% alone doesn’t account for the height of the content itself. We’re actually left with a more exaggerated offset than with our original 12% top padding.

Let’s correct for that height difference by setting the Translate-Y value to -50. Translate values are automatically set in percentages, so there’s no need to specify a unit.

And, voila! Our oversized content now fits.

50/50 Positioning is also useful when building and styling Event Cards (because event title lengths can vary greatly and space is limited) and Cover Blocks that grow to 100% height of the browser window.