9 Ways to Implement Vertical Alignment in CSS with Examples

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

Vertical alignment using Flexbox
Vertical alignment using position: absolute
Vertical alignment using Display: table
Vertical alignment using CSS: Grid
Vertical alignment using Line Height
Vertical alignment using Padding
Vertical alignment using Display: inline-block
Vertical alignment using CSS calc() function
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*/

}

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

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>

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

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>

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

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

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>

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

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

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

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>

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

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>

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

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>

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

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>

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

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

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>

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

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>

.sign-up {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

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>

.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

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

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

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

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

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

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

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:

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
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
CSS: Grid : With CSS Grid you can create rows and columns layout. Using the CSS Grid you can easily align the items vertically
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
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
Display:inline-block: You can easily align inline text and images using the inline-block element properties
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%
Position: absolute : You can use this property to set position: absolute on the child element to align it with the parent property
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

Blog