{"version":"1.0","type":"rich","title":"Vertical centering CSS technique","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-2867324?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}