/ css

Vertical and horizontal center align

Did a test to center elements vertically and horizontally.

See the Pen Test vertical and horizontal center align (@resting) on CodePen.

2 divs were used to center vertically and another 2 divs to center horizontally.

So the first 2 divs that centers horizontally is using text-align: center. Keep in mind that text-align only works for inline elements, hence the use of a wrapper to wrap it as a inline-block.

The next 2 divs are for vertical center align, and uses display: table and display: table-cell; vertical-align: middle.

Vertical and horizontal center align
Share this