Flexbox is a layout tool in CSS that can be used to center the element both vertically and horizontally. Centering the elements is one of the common needs while creating a webpage. You can use a few properties, such as justify-content and align-items, align-self, flex-direction: column, and margin: auto for centering the elements. In this blog, we will discuss these properties in detail.
Table of Contents:
Understanding Flexbox Basics
The Flexbox layout is designed to distribute the space in the container. It works well for lining up elements, and it does not depend on the size.
Syntax:
.container {
display: flex;
}
This sets up a flexible container, and you can then use properties to align its children.
Methods to Vertically and Horizontally Align Flexbox to Center
There are a few methods such as justify-content and align-items, align-self, flex-direction: column, and margin: auto to align Flexbox vertically and horizontally to the center. Let us discuss these methods below.
Method 1: Using justify-content and align-items
It is the most common approach to center the element both vertically and horizontally. You can use justify-content: center for aligning the item horizontally along the main axis and align-items: center to align items vertically along the cross-axis.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full height of the viewport */
background-color: lightgray;
}
.box {
padding: 20px;
background: blue;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Intellipaat</div>
</div>
</body>
</html>
Output:
Explanation: In this code, the box is centered using the flexbox properties justify-content: center and align-items: center. You can use these properties to align the flexbox to center both horizontally and vertically.
Method 2: Using align-self for Individual Elements
You can use align-self: center to align only one item. You can use this method, if you have many flex items on the webpage, and you want only one targetted item to get aligned to the center both horizontally and vertically.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Align-Self</title>
<style>
.container {
display: flex;
justify-content: space-around;
height: 100vh;
background-color: lightgray;
}
.box2 {
align-self: center; /* Centers only this item */
padding: 20px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">Course 1</div>
<div class="box2">Intellipaat</div>
<div class="box3">Course 2</div>
</div>
</body>
</html>
Output:
Explanation: You can use this code to create three boxes. The box in the middle is vertically centered using align-self: center while other boxes are aligned as per the container’s flex settings. For the equal spaces between the boxes, you can use the justify-content: space-around.
Method 3: Using flex-direction: column
You can use flex-direction: column, if you want to stack the items on top of each other instead of lining up in a row.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Column Centering</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: lightgray;
}
.box {
padding: 20px;
background: blue;
color: white;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Web Development</div>
<div class="box">Data Science</div>
</div>
</body>
</html>
Output:
Explanation: You can use this code to arrange the boxes in a column. CSS properties like justify-content: center and align-items: center are used to center them both vertically and horizontally in the container.
Method 4: Using margin: auto for Centering
You can use margin: auto, if there’s only one child element present. The auto value takes up all the extra space equally by placing the element in the center.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin Auto Centering</title>
<style>
.container {
display: flex;
height: 100vh;
background-color: lightgray;
}
.box {
margin: auto;
padding: 20px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Intellipaat</div>
</div>
</body>
</html>
Output:
Explanation: You can use this code to center the box both vertically and horizontally within the container by using margin: auto property.
Method 5: Centering with a gap for Spacing
You can use the gap property to add space between them and center the Flexbox horizontally and vertically on the webpage. You can set the gap to 20px to get equal spacing between the items.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Gap Centering</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
background-color: lightgray;
}
.box {
padding: 20px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Course 1</div>
<div class="box">Course 2</div>
</div>
</body>
</html>
Output:
Explanation: You can use this code to create two boxes with evenly spaced using gap: 20px. You can use the CSS properties such as justify-content: center and align-items: center to center the boxes horizontally and vertically within the container.
Conclusion
The above-mentioned methods are used to vertically and horizontally align the flexbox to the center. You can use properties such as justify-content and align-items, align-self, flex-direction: column, and margin: auto for this purpose. Vertically and horizontally centering elements using Flexbox ensures that your content is perfectly aligned within a container.
How to Vertically and Horizontally align Flexbox to Center – FAQs
1. What is the easiest way to center content with Flexbox?
You can use justify-content: center to center the items horizontally and align-items: center to center them vertically.
2. How do I center a single-child element?
You can use margin: auto to center it both vertically and horizontally if there is only one child element.
3. Can I center only one item while leaving others in their positions?
Yes, you can use align-self: center; on the specific child element to center just that one vertically.
4. How do I stack items vertically in the center?
You can use flex-direction: column, then apply justify-content: center and align-items: center.
5. How do I add spacing between items while keeping them centered?
You can use the gap property, such as gap: 20px, to add equal spacing between the items.