Thorough explanation of all techniques for vertically centering HTML elements with CSS!

Centering elements horizontally is not that difficult in website creation. It often requires only one line of code and can be implemented quickly.

What about the vertical center?

There is also a code that can be done in one line. Very easy in some situations.

However, there are many situations where a single line of code does not work, and you may get lost.

Vertical centering is not used as often as horizontal centering .

Therefore, it is sometimes called unfamiliar. If you don’t know how to do it when you try to implement it, you’re in trouble.

This article explains how to vertically center an HTML element with CSS.

There are various patterns, so please refer to them.

vertical-align

The first is the most typical vertical center placement method.

vertical-align is a property that specifies the vertical alignment of an element .

Values ​​are top, middle, bottom, etc. Centering is middle.

I will introduce a specific example.

For table cells

vertical-align is very simple and widely known because it allows you to specify the vertical position in one line, but the situations in which it can be used are limited.

Not available for all elements.

A table cell is a square in a table, and corresponds to th and td in HTML tags.

Within this tag, you can easily specify the vertical position with vertical-align.

It is described as follows.

HTML
<table>
<tr>
<td>上</td>
<td>中央</td>
<td>下</td>
</tr>
</table>

CSS
td {
height:80px; /
background:#cccccc; /
}
td:nth-child(1) {
vertical-align:top; /
}
td:nth-child(2) {
vertical-align:middle; /
}
td:nth-child(3) {
vertical-align:bottom; /
}

I specified top, center, and bottom alignment for each of the three cells in the table.

If the height of the cell is the default, it will fit the height of the text, so it is specified by a numerical value.

In this way, the top, center, bottom and each character are arranged. It’s very easy.

In table composition, contents of different heights are often arranged horizontally, so there are frequent opportunities to specify the vertical position.

You could say that vertical-align is a must-have property.

If it is inside a table, the vertical-align method is the only option .

It is also possible to make vertical-align effective by making it a table cell with CSS, even if vertical-align is not effective in the first place.

HTML
<div>中央</div>

CSS
div {
height:50px; /
background:#ddd; /
display:table-cell; 
}

Display:table-cell changed the div, which was originally a block-level element, to a table cell.

Vertical-align doesn’t work on block-level elements, but it works now that we’ve changed to table cells.

The width of a block-level element reflects the width of its parent element, but the width of a table cell reflects the size of its contents .

Use width to adjust accordingly.

For inline-block elements

Vertical-align works for table cells, inline elements, and inline block elements.

In this article, we will focus on inline-block elements.

HTML
<ul>
<li>中央1</li>
<li>中央2<br>中央2<br>中央2</li>
<li>中央3<br>中央3</li>　
</ul>

CSS
ul {
background:#ddd; /
}
li {
vertical-align:middle; /
display:inline-block; /
}

I lined up three lists with different heights.

Lists are originally stacked vertically, but by using inline-block elements, they are arranged horizontally.

And since we specified vertical-align:middle, the three lists with different heights are aligned in the middle.

This method is often used to vertically align side-by-side elements .

line-height

line-height is a property that specifies the line spacing of characters.

Although it is not originally intended for specifying the vertical position, it can be placed in the center using its properties.

HTML
<p>中央</p>

CSS
p {
height:50px; /
background:#ddd; /
line-height:50px; /
}

The same number is specified for the height of the parent element and the space between lines of characters.

The text is now centered vertically. In addition, in the image, the horizontal placement is also centered.

This method also requires specifying the height. Also, it is valid only when the character is one line.

If there are two lines or more, the characters will protrude from the parent element.

It can be used in a limited number of situations compared to vertical-align, which is automatically centered if the element is taller than its contents.

It ‘s good to use when you have a headline with a fixed height and design .

However, it must always be on one line. In the case of responsive content, please make sure that it fits in one line even when viewed on a smartphone.

padding

padding is a property that sets the padding of an element.

It is very frequently used, and it is no exaggeration to say that it is the foundation of the basics of CSS.

If it’s simple, it can be centered with padding alone.

HTML
<p>中央</p>

The point is to specify the same value for the top and bottom padding.

I have the same amount of space above and below the text. This means that it is centrally located. For elements with no specified height , this is sufficient.

It is not possible to vertically center all horizontal elements of different heights, or to center elements within fixed-height elements.

However, it works best when you have a solid color or repeating pattern background and want to center it.

There are many such situations, and in fact it may be the most frequently used vertical center placement method.

It is also the simplest and surest way to vertically center. No need to worry about the number of lines.

In the image, p is a block level element, so it is not aligned horizontally, but if it is an inline element, inline block element, or table cell, the width will change according to the content.

So centering is possible this way.

position

position is a property that specifies the position of the element.

This time, we will use absolute, which ignores the order of the elements and specifies the absolute value .

Absolute is often used when placing an element by the distance from the reference point, such as how many pixels from the top and what percentage from the bottom.

The case is as follows.

Set the value of absolute to the property of position like this. Now you can specify the position freely.

Plus, a property that specifies a specific location determines where it’s actually placed.

top means to specify the position from above. Since it is 20px, we are specifying 20 pixels from the top.

From above means from the upper side of the reference element.

In this case it is the top edge of the div where relative is specified.

Remember that relative is a value that specifies a reference and is used in combination with absolute. If there is no relative, the top of the page will be the reference .

Absolute positioning of position is very convenient and is often used to ensure that an element is positioned exactly where it is intended.

However, not many people know that it can be used for centering. I will introduce two methods.

The first way to center by position

Specify the position from the top and bottom, and also use the margin .

HTML
<div>
<p>中央</p>
</div>

The point is that the margin is set to auto.

Centered vertically. Let’s explain step by step.

Absolute position specification was performed with character absolute. The parent element that serves as the reference must have a relative.

Height is required for both parent and child elements. If the height of the child element falls below the content, it will protrude, so please be careful.

Next is the vertical positioning. Both top and bottom are required. If only one side, for example top, is described, it will be placed based on the top and will not be centered.

Please specify the same number again. If this value is different, the difference will be displayed shifted either up or down.

It’s easy to think that the number 0 is meaningful, but in fact any number is fine.

These two things are important.

And the key to achieving centering is the margin. Even if you don’t use absolute, it’s widely known that if you specify margin:auto, it will be centered horizontally .

This means that if both left and right are specified as auto, they will be calculated to be equal numbers.

The same thing happens with absolute vertical orientation, provided that both the parent and child have height and that the top and bottom positions are equal rather than auto.

If you add to this, it is possible to center the horizontal position as well.

HTML
<div>
<p>中央</p>
</div>

The idea is the same as for vertical. Both the parent and child elements have heights, and left and right are equal and not auto.

Since margin:auto corresponds to top, bottom, left, and right, there is no need to add it.

It looks slightly left because it’s a 50% width element that’s centered.

If you specify text-align:center, the text itself will also be perfectly centered.

Second way to center by position

The following method does not require a height on the parent element.

HTML
<div>
<p>中央</p>
</div>

A div can be centered even if it doesn’t have a height, but it’s left specified here for clarity.

It is the same as 1 that you need relative for the parent element and absolute for the child element. In case 2, it is not necessary to specify both top and bottom.

top:50% specifies that the element should be placed 50% from the top, that is, at half the position.

But this alone won’t center it. Since the element starts at 50%, it ends up being positioned slightly below center.

Margin-top adjusts this. Negative numbers are called negative margins and move elements in the opposite direction . In this case it is the top.

Half the height of the letter, or 0.6em, will be perfectly centered.

center pseudo-element

Pseudo-elements can also be centered using absolute. This is useful when adding icons, etc.

HTML
<p><a href="#">リンク</a></p>

Use pseudo-elements to display link icons.

It is the same as setting absolute to 50% for top and specifying half the height as negative margin for margin-top.

content is empty, but it’s an absolutely required property. Without it, no pseudo-elements will be generated.

The method is to specify the width and height of the empty content and display the icon there as a background image.

You can specify the image directly in content, but specifying it in the background is more convenient because you can freely adjust the width and height .

This description will look like this:

Icons are displayed vertically centered. Icons have no syntactical meaning in HTML and are purely visual.

It is recommended to express the source such as images in CSS instead of directly writing it in HTML.

That way, you have more options for how to specify the position.

transform

transform is a property that allows you to scale, move, or skew an element .

Of these, Move can be used in conjunction with Absolute to center the element.

HTML
<div>
<p>中央</p>
</div>

CSS
div {
position:relative; /
height:5em; /
background:#ddd; 
}
p {
position:absolute; /
top:50%; /
left:50%; /
transform: translateY(-50%) translateX(-50%); /
}

The horizontal center placement is also specified at the same time. Top is specified from the top, left is specified at the 50% position from the left.

As mentioned earlier, this means starting at the 50% position, so it won’t be centered.

The transform is used to align perfectly to the center. translate is the value to move the element, Y is the vertical axis and X is the horizontal axis.

-50% is specified to return 50% both vertically and horizontally.

In other words, move 50% up and 50% left .

If you move an object 50% from the top and 50% from the left and then move it in the opposite direction by the same number, you might think that it will return to its original position, but that is not the case. 50% for what is different.

50% for top and left is for div width.

The transform on the other hand is itself, i.e. 50% of p’s height and width.

It should now look like this:

An element specified to be placed at 50% of the div’s top and left position is moved back by 50% of its own size to be perfectly centered.

The advantage of this method is that you don’t have to specify the width and height of the element you are positioning .

By the way, if you delete the description of left and translateX, it will be centered only vertically.

flexbox

This is probably the most flexible method.

In addition to the vertical center, various positions can be specified, and the description is simple.

HTML
<div>
<p>中央</p>
</div>

CSS
div {
display:flex; /*flex*/
align-items:center; /
justify-content:center; 
height:5em; /
background:#ddd; 
}

Just specify display: flex, vertical position, and align-items on the parent element .

Here, the horizontal position specification and justify-content are also described at the same time. No need to specify CSS for child elements.

It should now look like this:

It will be perfectly centered like this without specifying any height, width or alignment numbers.

It also supports multiple elements.

HTML
<div>
<p>中央1</p>　
<p>中央2<br>中央2<br>中央2</p>　
<p>中央3<br>中央3</p>
</div>

CSS
div {
display:flex; /
align-items:center; /
justify-content:center; /
height:5em; /
background:#ddd; /
}

I placed multiple p’s with different heights in a div. I didn’t change the css description.

All elements inside a div with this flex will be lined up horizontally and centered regardless of height.

If you want to specify the position of multiple elements at once, it is absolutely recommended.

summary

Learn how to vertically center an element with CSS. There are six methods:

Vertical-align is the easiest and flexbox is the most flexible .

Flexbox can also arrange elements in various ways, so it is very useful to learn.

Each of the other methods has its own merits, so it’s a good idea to remember them and learn to use them properly for each situation.