Vertically center any element in CSS

In this article, we will learn how to set vertically center alignment with in an element using CSS?
Submitted by Abhishek Pathak, on October 14, 2017

In the last post we discussed about centering elements horizontally, here is a link to follow it: Center any element horizontally in CSS.

Today we will break down the code to vertically center any element in CSS.

Similar to horizontal centering, CSS works differently for inline and block elements for vertical centering as well. CSS has some rules to be followed, and once you did, you'll get the right positioning anywhere on the page.

Centering Inline elements

Inline elements are the elements that go with the content flow. Whereas, block level element takes up new line and space upto the width of the parent element. These include the text of a paragraph, link or some other text.

The key to vertical centering is with a text property called, line-height. The line height is the space above and below the text. So, if your parent container is of height, say 100px, and then apply line-height of 100px as the text will take 100px as height and center the content vertically. See demo at the end of the article.

Code

.text {
	line-height: 100px; /* Height of the parent container */
}

Centering block level elements

The block level elements are rather tricky to position vertically. We need to apply a hack to get it positioned at vertical center.

We need to first start with the parent element. It requires the width and height dimensions along with position property value as relative, because we will be transforming it's child (the element to be centered) relative to it.

Code

.element {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

Firstly, it also sets the element position as relative, because we need to move it relative to it's current position. Now, we have a top property whose value is 50%. This means that move it 50% from the top. But here's a catch, it aligns the top edge of the element at the 50% height from the top, which doesn't makes it at the vertical center and more downward position.

Using the transform property value translateY() we move the element to top by it's own 50%, making the center aligned to the center of the parent. And this makes it vertically centered to the parent container.

Here's a demo,

DEMO

HTML with CSS

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Vertical Center</title>
  
  <!-- CSS code below -->
  <style>
  .parent {
    position: relative;
    width: 250px;
    height: 250px;
    background: #ddd;
  }
  
  .inline {
    line-height: 250px;
    text-align: center;
  }
  .box {
    position: relative;
    width: 200px;
    height: 100px;
    background: #f56;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
  }
  
  </style>
  
</head>
<body>
 
 <h2>CSS Vertical center</h2>
 <h3>1. Inline element</h3>
 <div class='parent'>
   <p class="inline">Inline element</p>
 </div>
 
 
 <h3>2. Block Element</h3>
 <div class="parent">
   <div class="box">
     <p>Block element</p>
   </div>
 </div>
  
</body>
</html>

Hope you like the article. Share your thoughts in the comments below.

CSS Tutorial & Examples »

Creating Gradients with CSS3

Rotate fix an image on page with CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples