How to center content with HTML and CSS

#css #html #webdev #programming

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>

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>

The above HTML code will simply look like this:

Our next step will be to add CSS to our HTML code.

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;
}
```
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:

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
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;
}
```
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:

DEV Community

How to center content with HTML and CSS

How can we implement this?

Other ways of centering content with CSS

Top comments (0)

Read next

Controlled vs Uncontrolled Components in React: Choosing the Right Approach

React.js Explained: A Comprehensive Guide to Building Modern Web Applications

Toggle Switch Realistic illusion using the core html and core Css Code

How to Update Java JDK [A Simple Guide]