In this article, you will learn many approaches to how to vertically center an element with CSS
Dealing with vertical alignment has always been one of those everyday issues. It used to be a continual source of headaches for developers. Fortunately, it is now a simple operation thanks to new layouts like Flex and Grid. Nevertheless, knowing your options while handling a situation is usually a smart idea.
Let’s examine every instrument at our disposal to address vertical alignment. Despite the fact that some are not the most helpful, knowing them could help you better understand CSS.
How to Vertically Align with the Vertical-align Property
This property is used to vertically center inline elements. It aligns the element relatively to its parent. It’s vital to remember that the vertical-align property in CSS allows you to move text vertically up or down. Text can be repositioned vertically within its container by using this attribute, which sets the vertical alignment of an inline or table-cell element.
Vertical alignment will not work on block-level elements like div
Example of vertically aligning a text:
<!DOCTYPE html>
<html>
<head>
<title>Example of vertically aligning a text</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>How to Vertically Center an Element with Flexbox
Elements can be aligned vertically with Flexbox by using the justify-content, align-items, and align-self attributes.
Example of vertically aligning a text with Flexbox:
<!DOCTYPE html>
<html>
<head>
<title>Example of vertically aligning a text with Flexbox</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>How to Center Text Using CSS Grid
You can create a grid layout with one row and one column for a single div with the text centered within it. The align-items attribute in a grid layout determines how the content in each cell is aligned along the column (vertical) axis. This arranges your text inside the div element vertically.
Example code of how to center text using CSS grid
<!DOCTYPE html>
<html>
<head>
<title>Example code of how to center text using CSS grid</title>
<style>
.child {
display: grid;
align-items: center;
}
</style>
</head>
<body>
<div class="child">Vertically aligned text</div>
</body>
</html>How to Vertically Center Center with CSS Display property
Here, you set the elements to table and table cell using the display property. Then use the vertical-align attribute to center the content.
Example of vertically aligning a text with the CSS display property:
<!DOCTYPE html>
<html>
<head>
<title>Example of vertically aligning a text with the CSS display property</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>How to Vertically Align a Text using CSS line-height property
If the element contains text that is larger than the font size, add the line-height attribute to it. The text will be vertically centered by default, with equal spaces placed above and below it.
Example of vertically aligning a text with the CSS line-height property:
<!DOCTYPE html>
<html>
<head>
<title>Example of vertically aligning a text with the CSS line-height property</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>How to Vertically Center a Text using Padding
To vertically center a text using padding, you must set the parent element’s top and bottom padding equally. Use % unit to set the padding to allow dynamic growth. To understand what values are required at the top and bottom for this strategy to work and allow for dynamic growth, certain calculations must be made. It will not be necessary to calculate if you set the height to “relative”.
Example of vertically aligning a text with the CSS padding property:
<!DOCTYPE html>
<html>
<head>
<title>Example of vertically aligning a text with the CSS padding property</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>How to Vertically Center a Text Using CSS Float Property
You need to have an empty div which is floated, set the height to 50%, set float to left, clear child div by using the clear property and set negative margin-bottom on there floated div
Example of How to Vertically Center a Text Using CSS Float Property
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
height: 300px;
border: 1px solid #1c87c9;
}
#floated {
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="floated"></div>
<div id="child"></div>
</div>
</body>
</html>How to Vertically Center a Div Using Absolute Positioning and Negative Margin
Using the CSS position and margin property, you can vertically center block-level elements, and text. However, if the content exceeds the container, the element will not be seen on the screen
Example of vertically aligning a Text with the CSS position and margin property:
<!DOCTYPE html>
<html>
<head>
<title>Example of vertically aligning a Div with the CSS position and margin propert</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>How to Vertically Center a Div using Position and Stretch
By specifying absolute positioning and stretching, we tell the browser to automatically adjust the child element’s margins to match. To make the magic occur, you need to set the parent position to relative and the child to absolute and equally, its top, left, right, and bottom properties. Then finally set the margin of the child to auto so that it will be vertically and horizontally centered
Example of vertically aligning a Div with the CSS position property:
<!DOCTYPE html>
<html>
<head>
<title>Example of vertically aligning a Div with the CSS position property</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>How to Vertically Center a Div using CSS Transform Property
<!DOCTYPE html>
<html>
<head>
<title>How to Vertically Center a Div using CSS Transform Property</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>
