Vertical and Horizontal Center in CSS

Horizontal vertical align css
Horizontal vertical align css

Hy Everyone, In this tutorial, we will learn How we can align any content in Vertical and Horizontal center using CSS.

Table of Contents

Vertical and Horizontal Center in CSS

As we have always seen, we can easily align any content Horizontally Left, right, or center. But when it comes to Vertical Align it takes a lot of time.

We can use a simple property text-align: center; to align any content center of the screen horizontally.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .container{
        width: 100%;
        text-align: center;
      }
      .div{
        width: 40px;
        background-color: black;
        display: inline-block;
      }
      .div1{
        height: 50px;
      }
      .div2{
        height: 70px;
      }
      .div3{
        height: 30px;
      }
    </style>
  </head>
<body>
  <div class="container">
    <div class="div div1"></div>
    <div class="div div2"></div>
    <div class="div div3"></div>
  </div>
</body>
</html>


Run this code!

All the Child elements of the .container class will be Horizontally Centered using text-align: center; property.

Now We will learn an important property, that will help us to align our content vertically aligned.

vertical-align

Vertical-align property is used to align any content top, middle, or center. Here we will discuss all three values.

vertical-align: bottom;

It is a default property, as you can see in the above code snippet, all divs have a different height and are aligned bottom. It means we have no need to apply this property if our content is already bottom aligned.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .container{
      width: 100%;
      text-align: center;
    }
    .div{
      width: 40px;
      background-color: black;
      display: inline-block;
      vertical-align: bottom;
    }
    .div1{
      height: 50px;
    }
    .div2{
      height: 70px;
    }
    .div3{
      height: 30px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div div1"></div>
    <div class="div div2"></div>
    <div class="div div3"></div>
  </div>
</body>
</html>

vertical-align: top;

if we apply top as a value, all the div will be in the top position. If there are multiple divs with different heights, then the top value will align all divs with the highest height div. Let’s Take an example.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .container{
      width: 100%;
      text-align: center;
    }
    .div{
      width: 40px;
      background-color: black;
      display: inline-block;
      vertical-align: top;
    }
    .div1{
      height: 50px;
    }
    .div2{
      height: 70px;
    }
    .div3{
      height: 30px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div div1"></div>
    <div class="div div2"></div>
    <div class="div div3"></div>
  </div>
</body>
</html>


all the divs are aligned with the .div2 class div because this div has a maximum height.

You can change the other div height to see the difference.

vertical-align: middle;

This value is used to align all the content in the center position in the vertical view.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .container{
      width: 100%;
      text-align: center;
    }
    .div{
      width: 40px;
      background-color: black;
      display: inline-block;
      vertical-align: middle;
    }
    .div1{
      height: 50px;
    }
    .div2{
      height: 70px;
    }
    .div3{
      height: 30px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div div1"></div>
    <div class="div div2"></div>
    <div class="div div3"></div>
  </div>
</body>
</html>

Where we can use this property?

We can use this property to create a header when we have different sections like the logo section, menu section, and login section.
Also can be used in the footer section, when we need to align multiple sections to the top position.

Hope this Article was Interesting!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Tags:

Leave a Reply