vertically align content on html (native)

vertically align, web component, react
npm install vertically-aligned@2.0.0


Vertically Aligned

Small (<1kb) and native web component designed to verically align elements on a page.


Check it out on Codepen.


Seems like vertically align is still an issue? I still see a lot of people joking/complaining about this, so I guess this component will have an audience.


How to use it

On your regular websites just include the script and use the component

      <h1> content !!! </h1>

    <!-- use it from the CDN> -->
    <script src=""></script>

On react,preact and similar frameworks you can install the dependency:

npm install vertically-aligned --save

then import it:

import React, { Component } from 'react';
import 'vertically-aligned';

class HelloWorld extends Component {
  render() {
    return (
       <h1>Hello World, React!</h1>

export default HelloWorld;

That should output something like this:

demo image

No Flex? No problem!

Add the attribute noFlex to the HTML tag and it will use table styles.

    <vertically-aligned noFlex>
      <h1> content !!! </h1>

Don't wanna install a dependency?

Just copy the content of index.js on your app, there are only 55 lines of code there (w/o minification). Then include that file on your app and you can use it without installing or managing anything.