Skip to main content
100%

Vertical centering CSS technique

✓ Published0🌍 Public
Aabernier
Last edited Apr 29, 2014
Created on Jun 4, 2012

This example demonstrates a pure CSS technique for vertically centering content within a fixed-height container, using an inline-block pseudo-element and the `vertical-align: middle` property. The code defines a `.vcenter` class in an external stylesheet, with a `:before` pseudo-element stretched to full height to act as an alignment anchor. The HTML markup contains a single paragraph element with inline border styles, showcasing the centered text against a bordered container. No JavaScript libraries or data sources are involved; the rendering relies entirely on CSS layout rules applied to the provided `index.css` and `index.html` files.

AI-generated description

Similar vizzes