Vertically Align Center items with CSS

Posted By : Vijendra Kumar | 12-Jan-2017

Vertical centering is a bit trickier in CSS.

 

1.) If it us inline-* or inline elements (like links or text)?

 

A.) If it is a single line?

Sometimes text elements / inline can appear centered vertically , only because there is padding equal below and above them.

.link {

  padding-top: 30px;

  padding-bottom: 30px;

}

 

If sometimes padding is not an good option for any reason, and you are trying to align center the text that you well known it will not get wrap, then there’s a trick to make the text line-height equal to the parent height, this will make text align center.

.center-text-trick {

  height: 100px;

  line-height: 100px;

  white-space: nowrap;

}

 

B.) If it is multiple lines?

Equal padding from top and bottom can also centered the multiple lines of text too, but if in some condition that isn't work, you can give text a table cell property. In this case table-cell properly handled by vertical-align property.

.center-table {

  display: table;

}

.center-table p {

  display: table-cell;

  vertical-align: middle;

}

 

Sometimes If table-like structure you have, then you can use flexbox perhaps. In a flex-parent, a single flex-child can be make to align center pretty easily.

.flex-center-vertically {

  display: flex;

  justify-content: center;

  flex-direction: column;

  height: 400px;

}

 

This case only work if the parent container has a fixed height in px or % or atc. Because of this container here mentioned has a fixed height.

sometimes If these both techniques are not work properly, then you could use a unique technique. In this create a full-height pseudo element inside the parent container and add vertical align middle to the text.

.unique-item-center{

  position: relative;

}

.unique-item-center::before{

  content: " ";

  width: 1%;

  height: 100%;

  display: inline-block;

  vertical-align: middle;

}

.unique-item-center p{

  display: inline-block;

  vertical-align: middle;

}

 

2.) If it is a block-level element.

 

A.) If there is a fixed height element.

It's very common that text and images changes the height of parent container when width increased or decreased or applied various styles.

But if container is of fixed height, you can vertical align center like this:

.parent-container {

  position: relative;

}

.child-element {

  position: absolute;

  top: 50%;

  height: 100px;

  margin-top: -50px; /* this account is for padding and border if not using box-sizing: border-box; */

}

 

B.) If there is a unknown height element.

In this case to center align element, move it up half of it's height and also move it down half of it's height:

.parent-element {

  position: relative;

}

.child-element {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

 

C.) Also you can use flexbox to center align elements.

Flexbox is the easiest way to center align elements in horizontal or vertical.

.parent-element {

  display: flex;

  flex-direction: column;

  justify-content: center;

}

 

About Author

Author Image
Vijendra Kumar

Vijendra is a creative UI developer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Vijendra likes playing video games and soccer.

Request for Proposal

Name is required

Comment is required

Sending message..