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 thespan
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 thespan
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 theh1
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 withtop
left
text-align
andtransform
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 withposition:absolute
actually refers to the parent DOM element withposition: relative
. To do this I have added a parentdiv
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
-
Using
display: flex
property
To display content at center usingdisplay
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 fordisplay: flex
-
Using
display: grid
property
To display content at the center of the screen usinggrid
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)