We have already uncovered the essential moments of aligning content horizontally with CSS; it is time to grasp the basic principles and popular tactics for aligning content vertically with CSS.

Vertical aligning is much trickier than horizontal. While the latter has some reasonable explanations, with Y-axis, things may get weird. To make matters worse, it often happens that we do not know the exact height of the container; therefore, we need to go in blind.

Nevertheless, it does not mean that we cannot handle the situation efficiently. Even though CSS is notoriously famous for its kooky behavior, the time-tested hacks and tricks will help to solve the issue.

Jump into our guide on how to align content vertically with CSS to find the best solution for you.

How to Align Content Vertically with CSS

The solution for aligning content vertically largely depends on the display value of the element. There is a whole bunch of display options: inline, block, contents, flex, grid, table, run-in, and much more. However, what matters here are just two values: inline and block.

These two stand behind all the hustle and bustle, causing troubles for web developers when mixed up. Though we are going to crack them.

We have split our guide into two. The first part is about aligning inline-level elements, and the second one is about aligning block-level elements.

1. How to Align Inline-Level Element Vertically with CSS

The most famous representatives of inline-level content are text (paragraphs, spans, links) and, surprise-surprise, images.

While text-based elements are pretty obvious, presence of image here may take you aback. However, image has an inline display value by default, though there are some particularities in its behavior. We will consider it a little bit later.

Now, we are going to review the time-proven tactic for aligning text vertically with CSS.

How to Align Text Vertically with CSS

Aligning text vertically with CSS is quite simple.  The answer lies in using standard CSS property – vertical-align. It takes a dozen of arguments such as

  • Top;
  • Bottom;
  • Middle;
  • Baseline;
  • Initial;
  • Inherit;
  • Text-top;
  • Text-bottom;
  • Sub;
  • Super;
  • Length/%.

The first six values are self-explanatory. A baseline is a default value. However, what about the last three. Let us clear things up.

  • Sub – The element is positioned according to the subscript baseline of its parent.
  • Super – The element is positioned according to the superscript baseline of its parent.
  • Length/% – Move element by the specified length. You can either raise it or lower it by applying negative or positive values.

While it is useful to know all the options of vertical-align property, as practice shows, you will mostly need the first three. In addition, the last five options may work inconsistently across browsers. Therefore, use them with caution.

So, the code snippet for aligning content vertically with CSS is

.text {
  vertical-align: top;
}
.text {
  vertical-align: middle;
}
.text {
  vertical-align: bottom;
}

Also note, the vertical-align property comes in handy when you need to align content vertically on table-cells. It works perfectly there.

Center Text Vertically With Line-Height Property

Centering elements with CSS is always tricky. Therefore, if the previous solution does not bring the desired result, you can try a hack that involves line-height property.

It works if you know the height of the block in which the text is located. This way, you can match the height of the block and value of line-height property to give the element equal spaces on top and bottom.

The code snippet for this:

 p {
  height: 100px;
  line-height: 100px;
  text-align: center; /*add this line to place text right in the middle of the paragraph*/
}

How to Align Image Vertically with CSS

The main problem of aligning image vertically is that even though by default, it is an inline-level element; it behaves as a block-level element mainly because it has width and height. Therefore, sometimes things that work for inline elements do not work for images. So how to deal with that?

There is a solution. Let us regard it as an inline-block level element. The routine is based on four main aspects.

  • First, you need to add a new empty element, called helper. It should have an inline-block display value.
  • Secondly, add a white-space property to the parent, so that the helper element does not intrude with the image.
  • Thirdly, set the parent block to the max height of the image.
  • Finally, add a vertical-align property to the image.

To sum things up, the result code should look like this:

<div class=frame>
    <span class="helper"></span><img src="http://..." />
</div>
.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
    text-align: center; /*This is required to perfectly center image horizontally*/
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

What’s more, we can use the helper as a pseudo-element instead of a sterling semantic element. See it for yourself:

<div class="block">
    <img class="centered" src="..." />
</div>
/* This parent can be any width and height */
.block {
  text-align: center;
  white-space: nowrap;/* May want to do this if there is risk the container may be narrower than the element inside */
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The class for image to be centered */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px; /*  can be of any width and height */
}

If this solution feels a bit intricate, you can always regard the image as a block-level element. In this case, you can apply solutions that are applicable to block elements.

Move to our next chapter to find out how to align block vertically with CSS to get some hints on how to deal with images.

2. How to Align Block-Level Element Vertically with CSS

Aligning block vertically, much like aligning block horizontally, is a real challenge that sometimes may take not only your precious time but also nerves. Therefore, to save you from all the frustration, we are going to show you the best practices that are used to align block vertically with CSS.

How to Align Block to the Bottom or Top with CSS

The best tactic for moving block to the bottom of the container is to use the positioning, combining relative and absolute values. The code snippet for that:

<div class="container">
    <div class="child">Text....</div>
</div>
.container {
   position: relative;
}
.child {
   position: absolute;
   bottom: 0;
}

Alternatively for moving block to the top:

.container {
   position: relative;
}
.child {
   position: absolute;
   top: 0;
}

Well, this was the best tactic until Flexbox showed up several years ago.

Let’s consider the code snippet that demonstrates how to easily position block on the bottom of the container using Flexbox.

.container {
  display: flex;
  flex-direction: column; /*important! we need to change the direction for aligning elements*/
  justify-content: flex-end;
}

This piece of code works for situations when there is one child or children that should be placed as a group.

However, what if you want to change the position of a child and leave everything else as it is. In this case, you need to set styles for this particular child. The code snippet for that is:

<div class="container">
    <div class="child">Text....</div>
</div>
.container {
  display: flex;
  flex-direction: column; 
}
.child {
  align-self: flex-end;
}

Alternatively, if you need to move the elements to the top of the container.

.container {
  display: flex;
  flex-direction: column; /*important! we need to change the direction for aligning elements*/
  justify-content: flex-start;
}

Move only one element to the top:

<div class="container">
    <div class="child">Text....</div>
</div>
.container {
  display: flex;
  flex-direction: column; 
}
.child {
  align-self: flex-start;
}

How to Center Block Vertically with CSS

Aligning block to the top or the bottom of the container is turned out to be a piece of cake, especially with Flexbox. However, what about centering? Well, it is here where the situation becomes a bit tense.

Since you are going to center many things in the user interfaces, it is one of those skills that is essential to have in your arsenal.

There are many solutions for centering content vertically. Let’s consider the most popular ones that are proven by the community.

Use Negative Margins to Center Block within Block

The first solution implies you know the exact size of the block that should be centered. In this case, all you need to do is to apply negative top margin and negative left margin that equal half the block’s height and half the block’s width correspondingly. The code snippet for that:

/* In case block has width=50 and height=100 */
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* half of the height */
  margin-left: -25px; /* half of the width */
}

If you do not know the exact size of the block, then we should use transform property instead. The code snippet for that:

.centered {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /* prefixes */
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

Use Table to Center Block within Block

The second hack implies the utilization of table value for the display property. It requires you to transform container that includes content into the table, and content itself into table-cell. The code snippet looks like this:

<div class="parent">
    <div class="child">Text....</div>
</div>
.parent {
   display: table; 
   width: 100%; 
      }
.child {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

It should be noted that while it may seem like the right solution, at first sight, indeed, tables render differently than div. Therefore, there might be some surprises.

Use Flexbox to Center Block within Block

Finally, the last trick is based on Flexbox. As usual, everything is simple, clean, and neat. See it for yourself.

.container {
  display: flex;
  flex-direction: column; 
  justify-content: center;
}

If only one child should be centered:

<div class="container">
    <div class="child">Text....</div>
</div>
.container {
  display: flex;
  flex-direction: column; 
}
.child {
  align-self: center;
}

Conclusion

Although aligning content vertically with CSS may be challenging, yet there are many solutions to handle the situation efficiently and without losing your nerve.

Of course, hacks that are based on Flexbox are preferable. They are more attractive due to their tidiness and intuitiveness. However, if you want to cover all the browsers out there, even the oldest and the most erratic, then you should choose the old-school solutions that were tested by times.