DEV Community

Keyur Paralkar
Keyur Paralkar

Posted on

How to center content with HTML and CSS

#webdev #css #programming #html

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.

<!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>
Enter fullscreen mode Exit fullscreen mode

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

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

<h1 class="primary-text">
    <span class="primary-text-main">Text Placeholder</span>
    <span class="primary-text-sub">Div centered</span>
</h1>
Enter fullscreen mode Exit fullscreen mode

The above HTML code will simply look like this:
Alt Text

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.

    * {
    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.

    .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

    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

  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.

    .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.

    .text-box {
    position: relative;
    height: 100vh;
}

The final output will look something like the below codepen:
 

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:

    .text-box {
    height: 95vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

     
    Here is the working example for display: flex

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

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

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

    Here is the working example for display: grid

Top comments (0)