How to center content with HTML and CSS
Tags: css, html, webdev, programming
Published: 2021-04-10 11:21:35

I encounter this scenario of positioning the content to the center of the page or viewport or relative to the parent container. It is sometimes difficult for a newbie at first to figure this out. In this blog post, I am going to dive into some of the techniques which you can use to center the content on the screen(both vertically and horizontally) by just using HTML and CSS.

# How can we implement this?
To implement this we will be using `position: absolute` property to center our element. Let us start with writing a barebone HTML structure for our example.

Let us first create a simple HTML page.
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
  </head>

  <body>
    <div>
        <h1>
            <span>Text Placeholder</span>
            <span>Div Centered</span>
        </h1>
    </div>
  </body>
</html>
```

Here we have a `div` tag with `span` elements wrapped inside the `h1` tag.

Next step, is to assign class names for some elements:

```html
<h1 class="primary-text">
    <span class="primary-text-main">Text Placeholder</span>
    <span class="primary-text-sub">Div centered</span>
</h1>
```

The above HTML code will simply look like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf2zungi0tafeeetfoid.png)

Our next step will be to add CSS to our HTML code.
1. First, we will set the margin and padding to 0 for all the elements on the page. This is considered to be good practice and also helps to build much cleaner designs.
    ```css
    * {
        margin: 0;
        padding: 0;
    }
    ```
2. We are going to assign `display: block` to both the `span` elements so that it occupies the entire width on the screen. `display: block` will also help us to stack them vertically on the screen.
    ```css
    .primary-text-main {
        display: block;
    }

    .primary-text-sub {
        display: block;
    }
    ```
    After `display: block` CSS declaration of the `span` elements, our page will look like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqxx99kiw7ky1zcf8wh3.png)

    To show you guys that `display: block` actually occupies the entire width of the screen, I will have different background colors assigned to each of them. Here is how it looks
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iqgve6pl80nobqea2nl.png)

3. Our next step is to apply `position: absolute` to the `h1` tag. Position absolute removes the element from the normal flow of the DOM. It gets positioned relative to its parent DOM element which will be having some value to its position CSS property. We will finally make the adjustments to center the dom element with `top` `left` `text-align` and `transform` CSS properties.
    ```css
    .primary-text{
        background-color: blue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    ```
4. We need to make sure that our `h1` tag with `position:absolute` actually refers to the parent DOM element with `position: relative`. To do this I have added a parent `div` tag with class name `.text-box`.
    ```css
    .text-box {
        position: relative;
        height: 100vh;
    }
    ```

The final output will look something like the below codepen:
&nbsp;
{% codepen https://codepen.io/keyurparalkar/pen/PoWOzjz default-tab=css,result %}


# Other ways of centering content with CSS
1. Using `display: flex` property
To display content at center using `display` CSS property. We can simply set the parent's CSS as follows:
    ```css
    .text-box {
        height: 95vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    ```
    &nbsp;
    Here is the working example for `display: flex`
    
    {% codepen https://codepen.io/keyurparalkar/pen/dyNJVaK default-tab=css,result %}

2. Using `display: grid` property
To display content at the center of the screen using `grid` property, we use the following CSS:

    ```css
        .text-box {
            height: 95vh;
            display: grid;
        }

        .primary-text {
            margin: auto;
            background-color: blue;
        }
    ```

    Here is the working example for `display: grid`

    {% codepen https://codepen.io/keyurparalkar/pen/zYNppRg default-tab=css,result %}