DEV Community

Cover image for 9 Ways to Implement Vertical Alignment in CSS with Examples
alakkadshaw
alakkadshaw

Posted on • Originally published at deadsimplechat.com

9 Ways to Implement Vertical Alignment in CSS with Examples

#webdev #css #html #tutorial

In this article, we are going to explore different ways you can implement vertical alignment in CSS along with examples and use cases for each method

Here is the list of different ways we are going to explore

  1. Vertical alignment using Flexbox

  2. Vertical alignment using position: absolute

  3. Vertical alignment using Display: table

  4. Vertical alignment using CSS: Grid

  5. Vertical alignment using Line Height

  6. Vertical alignment using Padding

  7. Vertical alignment using Display: inline-block

  8. Vertical alignment using CSS calc() function

  9. Vertical alignment using margin: auto

let's go through each of these one by one

1. Vertical Alignment using flexbox  

Flexbox is a layout mode in CSS3. Flexbox allows you to automatically align and resize containers based on the height and width of the screen

Flexbox is also direction agnostic, unlike some other CSS frameworks. Here is how you can easily vertically align an object using Flexbox

The properties that we will need to vertically align are

  • display: flex

  • align-items: center

You can also use flex-direction: col to align the items vertically insead of row

let us consider an example

Example 1: Aligning Nav Bar 

.nav {
    display: flex;
    justify-content: space-around; 
    height: 60px;
    background-color: #333;
    color: #fff;
    align-items: center; /*aligns the items vertically*/

}
Enter fullscreen mode Exit fullscreen mode 
<nav class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item">Services</div>
    <div class="nav-item">Contact</div>
</nav>
Enter fullscreen mode Exit fullscreen mode

Example: 2 Vertically center alignment of text in a hero section

In this example we will vertically align the text in a hero section.

<section class="hero-section">
    <h1 class="hero-title">Awesome Corporation!</h1>
</section>
Enter fullscreen mode Exit fullscreen mode 
.hero-section {
    display: flex;
    flex-direction: column; /* this will create a column of elements */
    justify-content: center; /* The property centers the elements vertically. */
    height: 100vh; /* we are giving the full viewport height */
    text-align: center; /* we are aligning the text horizontally */
    color: #blue;
}
Enter fullscreen mode Exit fullscreen mode

2. Vertical alignment using position: absolute

position: absolute

can be used to vertically align CSS. However, it should be used with caution as it could lead to layout problems if it is not used properly.

Other CSS properties such as flexbox or Grid are preferable to using position: absolute.

Here are some of the examples of

Example 1:  vertically aligning one element in the middle of a parent element 

<div class="parent-element">
    <div class="child-element">Centered text!</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.parent-element {
    position: relative;
    height: 200px;
    border: 1px solid black;
}

.child-element {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
Enter fullscreen mode Exit fullscreen mode

Example 2: Aligning multiple elements vertically using position: absolute

In this example, we will learn how to align multiple elements vertically using position: absolute

    <div class="parent-element">
      <div class="child-element" id="child1">Element a</div>
      <div class="child-element" id="child2">Element b</div>
      <div class="child-element" id="child3">Element c</div>
    </div>
Enter fullscreen mode Exit fullscreen mode 
body {
  font-family: sans-serif;
}

.parent-element {
  position: relative;
  height: 300px;
  border: 1px solid black;
}

.parent {
  position: relative;
  height: 300px;
  border: 1px solid black;
}

.child {
  position: absolute;
  width: 100%;
}

#child1 {
  top: 0;
}

#child2 {
  top: 100px; 
}

#child3 {
  top: 200px;
}
Enter fullscreen mode Exit fullscreen mode

💡
JavaScript ChatAPI and SDK: Easily add Chat to your website or app with DeadSimpleChat

3. Vertically Align items using Display: table

In this method, we will use the properties of the table element to align elements vertically

Example 1: Vertically align in the middle of a Parent element

let's look at the code

body {
  font-family: sans-serif;
}

.parent-element {
  display: table;
  height: 200px;
  width: 100%;
  border: 1px solid black;
}

.child-element {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode 
    <div class="parent-element">
      <div class="child-element">Center me!</div>
    </div>
Enter fullscreen mode Exit fullscreen mode

In this example, the parent is a table and the child is a table cell. we are then vertically aligning the child using the vertical-align: middle property

Example 2: Aligning 3 elements vertically in a Single Line

Let us look at the code first and then discuss it further

  <div class="parent-element">
      <div class="child-element">Element A</div>
      <div class="child-element">Element B</div>
      <div class="child-element">Element C</div>
    </div>
Enter fullscreen mode Exit fullscreen mode

and CSS

body {
  font-family: sans-serif;
}
.parent-element {
  display: table;
  width: 100%;
  border: 1px solid black;
}

.child-element {
  display: table-cell;
  height: 100%;
  border: 1px solid red;
}
Enter fullscreen mode Exit fullscreen mode

In this case we are displaying each child element as a table cell within the table parent container

4. Vertical alignment using CSS: Grid

Let us use the CSS grid. The Grid provides a simple way to vertically align the content

Example 1: Aligning a single child vertically inside a parent container 

    <div class="grid">
      <div class="item">Item that is in center</div>
    </div>
Enter fullscreen mode Exit fullscreen mode 
.grid {
  display: grid;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

In this example we have a Grid class and an item class and we are giving the grid class the property of display:grid and we are aligning items in center

Note: Grid is not supported with older browsers, but many newer browsers support.

Example 2: Aligning multiple items vertically inside a container

In this example, we are going to vertically align multiple items

    <div class="grid">
      <div class="item">Item A</div>
      <div class="item">Item B</div>
      <div class="item">Item C</div>
    </div>
Enter fullscreen mode Exit fullscreen mode 
.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Example 1: Cantering text in a navigation bar

In this. example we are going to vertically center the links in the navigation bar using line height

    <div class="navbar">
      <a href="#">Support</a>
      <a href="#">Products</a>
      <a href="#">Services</a>
    </div>
Enter fullscreen mode Exit fullscreen mode 
body {
  font-family: sans-serif;
}
.navbar {
  height: 50px;
  background-color: #333;
}

.navbar a {
  line-height: 50px;
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}
Enter fullscreen mode Exit fullscreen mode

Example 2: Centering text in a button

If you have a big button and you want to center the text inside the button, you can do it using line height.

The trick to center text using line height is to set it at 50%

<!DOCTYPE html>
<html>
  <body>
    <button class="signup-button">Sign up for a new Account</button>

    <script src="src/index.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
body {
  font-family: sans-serif;
}
.signup-button {
  height: 40px;
  line-height: 40px;
  border: none;
  background-color: #008cba;
  color: white;
  padding: 0 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

6 Vertical alignment using padding

Many times padding can be used to align items inside a container. Remember

We have a button with fixed height and we want to center the text inside it vertically

<button class="sign-up">Sign Up</button>
Enter fullscreen mode Exit fullscreen mode 
.sign-up {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

In the above example we are giving the top and bottom padding of 10 px and left and right padding of 20px to center the text where we want to inside the button

The next example is an important one and much searched across the internet

Example 2: Vertically centering a single line of text inside of a div 

<div class="box">Vertically centered text</div>
Enter fullscreen mode Exit fullscreen mode 
.box {
    height: 50px;
    padding: 15px 0;
    border: 1px solid #000;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Here we have 15px of padding applied on top and bottom of the div with the class box

the padding pushes the div borders 15px up and down thus vertically cantering the text in the middle

7. Vertical alignment using Display: inline-block

Display: inline-block is na important css property using which you can display the element inline (like an inline element) and you can also adjust the height and width of the element as well like an block element

It is important to note that the inline-element works in realtion to its sibling elements and not inside the element

vertical-align property can be used along with the inline-block element to vertically position the element in relation to each other

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="navigation">
        <a href="#">Products</a>
        <a href="#">Services</a>
        <a href="#">Support</a>
      </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
body {
  font-family: sans-serif;
}
.container > * {
  display: inline-block;
  vertical-align: middle;
}

.navigation a {
  padding: 0 10px;
}
Enter fullscreen mode Exit fullscreen mode

8. Vertical alignment using CSS calc() function

the calc() in css can be used to perform calculation to deteremine property values of elements.

It can also be used to align content by settings the top or bottom positions and substracting 50% of their height

the parent element should be set to relative and the child element should be set to absolute

  <div class="container">
      <div class="content">Hello, World!</div>
    </div>
Enter fullscreen mode Exit fullscreen mode 
body {
  font-family: sans-serif;
}
.container {
  position: relative;
  height: 300px;
  border: 1px solid #000;
}

.content {
  position: absolute;
  top: calc(50% - 10px);
  width: 100%;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

What are we doing here.

we are calculating the top position of the .content dev by using the calc(50% - 10px) This moves it down the halfway point of .container and then moves it up by half of its own height

9. Vertical alignment using margin: auto

The vertical alignment using margin:auto you can align the items vertically but this only works when the parent container has a specified height and the child container has a specified height and the parent is a flex container

let look at some examples to better

<!DOCTYPE html>
<html>
  <body>
    <section class="container">
      <button class="button">Click Me!</button>
    </section>

    <script src="src/index.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  height: 300px;
  border: 1px solid #000;
}

.button {
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

In this example the parent has a specified height and the display:flex property.

the .hero-heading and margin:auto causes it to vertically and horizontally centered within the parent container

Conclusion

In this article we have shown different ways you can align items vertically using various css methods and properties

Here are all the methods summarized for you:

  1. Display: table Here you create the parent element as a table, doing this the child element becomes a table cell and hence can be easily vertically aligned

  2. Flexbox: Here we make the parent container into a flexible container and we can easily align the child components using the align-items property of flexbox

  3. CSS: Grid : With CSS Grid you can create rows and columns layout. Using the CSS Grid you can easily align the items vertically

  4. Line-height: In the line height method you can easily align single line of text within a container. If you know the height of the container you can easily set the line-height of the child and align it with the container as you want

  5. Padding: You can set the padding to increase and decrease the area surrounding the element and using that you can easily align the items vertically

  6. Display:inline-block: You can easily align inline text and images using the inline-block element properties

  7. CSS calc() function: Using the CSS calc() function you can calculate the height of the container and set the height of the child to automatically align with that of the container by setting the height to 50%

  8. Position: absolute : You can use this property to set position: absolute on the child element to align it with the parent property

  9. Margin:auto: You can set margin: auto in a flex container to automatically align the item or child element vertically and horizontally with respect to the parent container.

Note: This article was originally written on DeadSimpleChat : 9 Ways to Implement Vertical Alignment in CSS with Examples

Top comments (5)

Collapse
 
alakkadshaw profile image
alakkadshaw •

Thank you for reading the article.

Collapse
 
undqurek profile image
Info Comment hidden by post author - thread only accessible via permalink
undqurek • • Edited

I recommend to check this articles also:

You can find there about 10 ways to center element vertically. Some solutions there have great legacy.

Collapse
 
madsstoumann profile image
Mads Stoumann •

You can also use place-content to center both axes in one go:

.grid {
  display: grid;
  place-content: center;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
artydev profile image
artydev •

Nice, thank you

Collapse
 
fruntend profile image
fruntend •

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Some comments have been hidden by the post's author - find out more

Read next

josefine profile image

Studying for CPACC | Becoming a Certified Accessibility Professional

Josefine Schfr -

yulin profile image

WSL Error: no space left on device

Yulin -

borysshulyak profile image

High Level requirements and purposes

Boris Shulyak -

prast profile image

Launching a website offline without the Internet using Service Worker (English version)

Ramzan -