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: blockto both thespanelements so that it occupies the entire width on the screen.display: blockwill also help us to stack them vertically on the screen.
.primary-text-main { display: block; } .primary-text-sub { display: block; }After
display: blockCSS declaration of thespanelements, our page will look like this:
To show you guys that
display: blockactually 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: absoluteto theh1tag. 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 withtoplefttext-alignandtransformCSS 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
h1tag withposition:absoluteactually refers to the parent DOM element withposition: relative. To do this I have added a parentdivtag 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
-
Using
display: flexproperty
To display content at center usingdisplayCSS 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 fordisplay: flex -
Using
display: gridproperty
To display content at the center of the screen usinggridproperty, 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)