Quick-fire CSS Solutions

Five easy ways to solve common CSS issues

I thought I’d put together a set simple methods to solve common CSS issues. They are simple and quick-fire and can be implemented with minimal code.

Smoothen out fonts

Remove jagged pixels from your text using rotation

transform: rotate(-0.0000000001deg);

This property will smoothen out your fonts by performing a minuscule rotation. It works well with all major browsers.

live demo

Making adjacent DIVs have the same height

Make your layouts flexible by using the super cool flex-box. Learn more about it here.

display: flex;

live demo

Centering an absolute element

Dialogue boxes and notifications can be centered quickly by aligning their position across all dimensions.

bottom: 0; left: 0; top: 0; right: 0;

margin: auto;

position: absolute;

live demo

Center align text vertically

You can align text vertically to the center of the page without using padding.

.parent { display: table;}

.child { display: table-cell; text-align: center; vertical-align: middle;}

live demo

Truncate multi-line strings properly

These properties work well with Webkit browsers and can be used to truncate multi-line text on a webpage.

display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;

live demo