How to Vertically Center Text with CSS
Centering elements vertically with CSS often gives trouble. However, there are several ways of vertical centering, and each is easy to use.
Use the CSS vertical-align property
The vertical-align property is used to vertically center inline elements.
The values of the vertical-align property align the element relative to its parent element:
- Line-relative values vertically align an element relative to the entire line.
- Values for table cells are relative to the table-height-algorithm, which commonly refers to the height of the row.
It is important to note that it is possible to nudge text vertically up or down in CSS using the vertical-align property. This property sets the vertical alignment of an inline or table-cell element, and can be used to adjust the vertical position of text within its container.
Note that vertical-align only applies to inline or table-cell elements, so it may not work as expected on block-level elements such as <div> or <p>. In such cases, you may need to wrap the text in an inline or table-cell element to apply vertical-align.
Example of vertically aligning a text:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
display: table-cell;
width: 250px;
height: 200px;
padding: 10px;
border: 3px dashed #1c87c9;
vertical-align: middle;
}
</style>
</head>
<body>
<div>Vertically aligned text</div>
</body>
</html>Result
Use CSS Flexbox
With Flexbox, it is possible to align elements vertically (or horizontally) with the align-items, align-self, and justify-content properties.
Example of vertically aligning a text with Flexbox:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
section {
display: flex;
width: 50%;
height: 200px;
margin: auto;
border-radius: 10px;
border: 3px dashed #1c87c9;
align-items:center;
justify-content:center;
}
</style>
</head>
<body>
<section>
<p> I'm centered with Flexbox!</p>
</section>
</body>
</html>
Use the CSS display property
With the display property, we're going to set the elements to "table" and "table cell". We center the content with the vertical-align property.
Example of vertically aligning a text with the CSS display property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#parent {
display: table;
width: 100%;
height: 200px;
border: 3px dashed #1c87c9;
text-align: center;
}
#child {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">I am vertically centered</div>
</div>
</body>
</html>Use the CSS line-height property
Add the line-height property to the element containing a text larger than its font size. By default, equal spaces will be added above and below the text, and you’ll get a vertically centered text.
Example of vertically aligning a text with the CSS line-height property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
height: 90px;
line-height: 90px;
text-align: center;
border: 3px dashed #1c87c9;
}
</style>
</head>
<body>
<p>I am vertically centered</p>
</body>
</html>The following example works for a text with single and multiple lines. However, it requires a fixed height container.
Example of vertically aligning a text by using the CSS line-height property with a fixed height container:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
display: inline-block;
width: 100%;
height: 200px;
vertical-align: middle;
line-height: 200px;
text-align: center;
border: 3px dashed #1c87c9;
}
</style>
</head>
<body>
<div>I am vertically centered</div>
</body>
</html>Set equal top and bottom padding
When vertically aligning a text with the padding property, we must set the top and bottom padding of the parent element to be equal.
Example of vertically aligning a text with the CSS padding property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.center {
padding: 10% 0;
border: 3px dashed #1c87c9;
}
</style>
</head>
<body>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>When setting the padding, use % to help them grow dynamically. This method requires some calculations to understand what values are needed on the top and bottom, so as they can grow dynamically. If you set the height to "relative", the calculation will not be needed.
Set absolute positioning and negative margin
We can vertically align a text with the CSS position and margin properties used with block-level elements. Do not forget to set the height of the element that you want to center.
- Set the position to "relative" for the "parent" class, and "absolute" for the "child_1" and "child_2" classes.
- Set both the top and left properties to 50% to center the left corner of the child <div>.
- Set the width and height of the child <div> elements in a way so it will be moved to up and left.
- Give a negative margin, which halves the height and width.
Example of vertically aligning a text with the CSS position and margin properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.parent {
position: relative;
width: 100%;
height: 220px;
background: #1faadb;
color: #fff;
}
.child_1,
.child_2 {
position: absolute;
top: 50%;
left: 50%;
width: 110px;
height: 70px;
background: #8ebf42;
text-align: center;
}
.child_1 {
margin: -35px 0 0 -55px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child_1">Vertically Centered Text</div>
</div>
<br/>
<div class="parent">
<div class="child_2">Not Centered Text</div>
</div>
</body>
</html>Set absolute positioning and stretching
By setting absolute positioning and stretching, we instruct the browser to automatically set the margins of the child element so as they become equal.
- Set the position for the parent to "relative", and for the child, set it to "absolute".
- Set the top, bottom, left, and right properties for the child.
- Set the margin to "auto" to make all margins equal and make the child <div> to be centered vertically as well as horizontally.
Example of vertically aligning a text with the CSS position property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.parent {
position: relative;
text-align: center;
height: 300px;
background-color: lightblue;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 10%;
margin: auto;
font-size: 20px;
line-height: 28px;
padding: 10px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Example</div>
</div>
</body>
</html>Set the CSS transform property
When we have position: absolute, top: 50%, left: 50%, the calculations are made starting from the upper left corner. To position a box in the center, we must “move” it -50% left and 50% up by setting transform: translate (-50%;-50%).
Example of vertically aligning a box with the CSS transform property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.parent {
position: relative;
width: 100%;
height: 220px;
background: #1faadb;
color: #fff;
}
.child_1,
.child_2 {
position: absolute;
top: 50%;
left: 50%;
width: 90px;
height: 90px;
padding: 5px;
background: #8ebf42;
text-align: center;
}
.child_1 {
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child_1">Vertically Centered Box</div>
</div>
<br/>
<div class="parent">
<div class="child_2">Not Centered Box</div>
</div>
</body>
</html>Use floater div
Using the floater div method requires to have an empty <div>, which is floated.
- Set the float property to "left".
- Set the heigth to 50%.
- Clear the child <div> by using the clear property.
- Set a negative margin-bottom on the floater <div>.
Example of vertically aligning a text with the CSS float property:
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
height: 300px;
border: 1px solid #1c87c9;
}
#floater {
float: left;
width: 100%;
height: 50%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
background: #8ebf42;
}
</style>
</head>
<body>
<h1>Example of vertically aligned text with CSS float property:</h1>
<div id="parent">
<div id="floater"></div>
<div id="child"></div>
</div>
</body>
</html>