9 Ways to Implement Vertical Alignment in CSS with Examples
Tags: webdev, css, html, tutorial
Published: 2023-06-20 21:32:05

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

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

```html
<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>
```
{% embed https://codesandbox.io/embed/bitter-fog-9ysdgr?fontsize=14&hidenavigation=1&theme=dark %}

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

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

```html
<section class="hero-section">
    <h1 class="hero-title">Awesome Corporation!</h1>
</section>
```

```css
.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;
}
```
{% embed https://codesandbox.io/embed/recursing-bardeen-m3h46d?fontsize=14&hidenavigation=1&theme=dark %}

## 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

```html
<div class="parent-element">
    <div class="child-element">Centered text!</div>
</div>
```

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

.child-element {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
```
{% embed https://codesandbox.io/embed/cocky-matsumoto-jrw7g5?fontsize=14&hidenavigation=1&theme=dark %}

### Example 2: Aligning multiple elements vertically using position: absolute

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

```html
    <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>
```

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


{% embed https://codesandbox.io/embed/keen-ganguly-jh5yrg?fontsize=14&hidenavigation=1&theme=dark %}

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text"><a target="_blank" rel="noopener noreferrer nofollow" href="https://deadsimplechat.com/javascript-chat-api-sdk" style="pointer-events: none"><strong>JavaScript ChatAPI and SDK: Easily add Chat to your website or app with DeadSimpleChat</strong></a></div>
</div>


## 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

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

```html
    <div class="parent-element">
      <div class="child-element">Center me!</div>
    </div>
```

{% embed https://codesandbox.io/embed/nostalgic-glitter-jkgqvk?fontsize=14&hidenavigation=1&theme=dark %}

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

```html
  <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>
```

and CSS

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

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

```html
    <div class="grid">
      <div class="item">Item that is in center</div>
    </div>
```

```css
.grid {
  display: grid;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
```


{% embed https://codesandbox.io/embed/zealous-dew-75yvs3?fontsize=14&hidenavigation=1&theme=dark %}

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

```html
    <div class="grid">
      <div class="item">Item A</div>
      <div class="item">Item B</div>
      <div class="item">Item C</div>
    </div>
```

```css
.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
```
{% embed https://codesandbox.io/embed/nervous-panini-tp6xfd?fontsize=14&hidenavigation=1&theme=dark %}


### 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

```html
    <div class="navbar">
      <a href="#">Support</a>
      <a href="#">Products</a>
      <a href="#">Services</a>
    </div>
```

```css
body {
  font-family: sans-serif;
}
.navbar {
  height: 50px;
  background-color: #333;
}

.navbar a {
  line-height: 50px;
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}
```
{% embed https://codesandbox.io/embed/smoosh-microservice-tzfqk8?fontsize=14&hidenavigation=1&theme=dark %}

### 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%

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

    <script src="src/index.js"></script>
  </body>
</html>
```

```css
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;
}
```
{% embed https://codesandbox.io/embed/late-morning-2rjght?fontsize=14&hidenavigation=1&theme=dark %} 

## 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

```html
<button class="sign-up">Sign Up</button>
```

```css
.sign-up {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
```
{% embed https://codesandbox.io/embed/goofy-liskov-6ydn5t?fontsize=14&hidenavigation=1&theme=dark %}

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

```html
<div class="box">Vertically centered text</div>
```

```css
.box {
    height: 50px;
    padding: 15px 0;
    border: 1px solid #000;
    text-align: center;
}
```

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

```html
<!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>
```

```css
body {
  font-family: sans-serif;
}
.container > * {
  display: inline-block;
  vertical-align: middle;
}

.navigation a {
  padding: 0 10px;
}
```

## 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

```html
  <div class="container">
      <div class="content">Hello, World!</div>
    </div>
```

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


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

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

    <script src="src/index.js"></script>
  </body>
</html>
```

```css
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  height: 300px;
  border: 1px solid #000;
}

.button {
  margin: auto;
}
```
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](https://deadsimplechat.com/blog/ways-to-implement-vertical-alignment-in-css/)