Multiple Solutions to Tricky-But-Should-Be-Simple CSS Problems

Photo by JESHOOTS.COM on Unsplash

Centering content vertically

The Problem

3 Solutions

Method 1: Absolute Positioning + Transform

• Uses absolute positioning on the child. Parent must be set to a position other than the default (static) which is how CSS works
• top: 50% places the element’s top border at the vertical middle. It’s the transform: -50% that ensure the child is vertically aligned in the middle by adjusting the element in half

• This is good because it’s reliable across browsers and stable
• Things to watch out with this one: Doesn’t work if the child is pure text, meaning not wrapped in span, div, p, etc

Method 2: Flexbox

• The Flexbox specs allow an easy way to vertically align child by adding two styles on the parent
• display: flex does…..
• align-items: center does…..
• This is a great simple option to be used if don’t need to support older browsers

Method 3: Table Cell

• Like the Flexbox way in method, this option also only requires to extra styles applied to the parent
• vertical-align: middle is easier to remember than align-items: center
• Can use more than Flexbox.
• Downside is it’s weird, if you’re on pedantic team, some would object to using display: table-cell on anything that’s not technically a table

Centering content horizontally

The Problem

3 Solutions

Method 1: Text-Align

• Shortest option, simply add text-align: center to the parent
• Something to note: only works when applied to a parent that is a block
• Downside is the semantics, text-align get objections from some developers when it’s used to center align anything other than text

Method 2: Flexbox

• Straightforward approach, can be used in any project that doesn’t have to support older browsers that aren’t yet equip to handle Flexbox

Method 3: Absolute Positioning + Transform

• This approach has the same implementation and drawbacks as when it was used for vertical alignment. The only change is that transform: translateY(-50%) becomes transform: translateX(-50%)

Overflowing Text

The Problem

4 Solutions

Method 1: Word-Wrap

• Adding word-break: break-word to the parent div
• This will break long continuous words/strings when they hit the border of the container
• This style only works if the parent has a width that’s explicitly set

Method 2: Word-Break

• More aggressive than word-wrap will break any word/string when they hit border of the container regardless of they’re long continuous words or not
• Isn’t supported by older versions of FireFox

Method 3: Overflow-Wrap

• While word-wrap is still more popularly used, overflow-wrap is it’s alias
• overflow-wrap is a newer name for word-wrap and works in the exact same way

Method 4: Inline-Block

• Methods 1 to 3 have assumed the parent div needed to be a fixed with. If that isn’t the case adding display: inline-block to the parent will allow for having a dynamic width, so when it contains longer words it’ll have a larger width to accommodate

Vertically Centering Siblings

The Problem

Solutions

Method 1: Vertical-Align

• Simply add vertical-align: middle to both siblings which in this case is a img and a div
• Note: vertical-align doesn’t work on block elements. That’s why this method adds a display: inline to the div

Method 2: Transform + Absolute Positioning

• Since this method depends on adding absolute positioning both siblings are wrapped in a div which has a position: relative style applied to it
• The parent div's height must be set, in this case it’s set to be the height of the image
• Like in the previous vertical aligning example, transform: translateY(-50% ,top: 50% and position: absolute are added together. In this case it’s to the span element that contains the text
• Since vertical-align is supported in all browsers, I strongly recommend using Method 1 since it’s much more straightforward

Conclusion

There’s always more than one way of doing something. In some cases some methods make more sense. And some cases there’s equally valid options and comes down to preference.

It’s up to us a developers to know when to use which tools. Do you have another method for any of the above problems that weren’t included in this post? Add them below!