How to center content using CSS Flexbox
Learn to align items horizontally and vertically in any direction using modern CSS Flexbox properties. This guide covers container setup, item alignment, and common debugging steps for responsive layouts.
You will center a child element both horizontally and vertically inside a parent container using CSS Flexbox. These steps work on any modern browser supporting the Flexbox specification. Follow the commands to create a working HTML file and apply the necessary CSS rules.
Prerequisites
- A code editor such as VS Code, Sublime Text, or Nano installed on your system.
- A web browser to view the results (Chrome, Firefox, Edge, or Safari).
- A basic understanding of HTML structure (div elements, class attributes).
- No specific server or OS version is required; this runs in a static environment.
Step 1: Create the HTML structure
Start by creating a new file named index.html on your desktop or project folder. This file will contain the parent container and the child element you want to center. Open the file in your editor and paste the following boilerplate code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering Demo</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background-color: #333;
color: white;
border-radius: 8px;
}
.content {
padding: 20px;
background-color: #ff5722;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">Centered Content</div>
</div>
</body>
</html>Save the file. You have created a body that fills the viewport and a container with a fixed size. The child element .content sits inside the container.
Step 2: Set the container as a flex container
Apply the display: flex property to the parent element to activate the flex layout. This tells the browser to treat direct children as flex items. You can apply this to the body tag to center everything in the window, or to the .container class to center items within that box. In the example above, both the body and the container use flex properties.
.container {
display: flex;
}Once this rule is active, the browser calculates the size of flex items based on their content. The container now acts as a flexible box that distributes space between items.
Step 3: Align items horizontally
Use the justify-content property to align items along the main axis, which is horizontal by default. To center the child element horizontally within the parent, set the value to center. This pushes the item to the middle of the available space. If you set it to flex-start, the item aligns to the left. If you set it to space-between, items distribute evenly with gaps.
.container {
justify-content: center;
}Run the HTML file in your browser. You will see the red box centered horizontally inside the dark gray box.
Step 4: Align items vertically
Use the align-items property to align items along the cross axis, which is vertical by default. To center the child element vertically, set the value to center. This stacks the item in the middle of the parent's height. Other values include flex-start for top alignment and stretch to make the item fill the height.
.container {
align-items: center;
}Combine justify-content: center and align-items: center to achieve perfect centering in both directions. This combination works for a single item or multiple items within a row.
Step 5: Center multiple items
Test the layout by adding a second child element inside the container. The flexbox automatically distributes space between them. With justify-content: center, the group of items centers as a unit. With align-items: center, the group centers vertically. You can also use flex-wrap: wrap to allow items to move to the next line if they overflow the container width.
.container {
flex-wrap: wrap;
justify-content: center;
align-items: center;
}Add a second div inside the container. Observe how the items stack and center themselves when the container width shrinks.
Verify the layout
Open index.html in your browser. You should see a dark gray square centered in the browser window. Inside that square, a red box is centered both horizontally and vertically. If you resize the browser window, the content remains centered. The layout adapts smoothly to different screen sizes.
Expected Output:
[ Dark Gray Box ]
[ Red Box ]
The visual result confirms that the flex properties are applied correctly. The items are not floating or aligned to the edges unless explicitly set.
Troubleshooting
- Items are not centering: Ensure the parent element has
display: flexset. Without this, the browser uses the default block layout, which aligns items to the top and left. - Items stick to the top: Check that
align-items: centeris present. If missing, items default to the start of the cross axis. - Items stick to the left: Check that
justify-content: centeris present. If missing, items default to the start of the main axis. - Content overflows: If the content is too large, add
flex-wrap: wrapto allow items to flow to the next line. Then recheck the centering logic. - Browser compatibility: Most modern browsers support Flexbox without prefixes. If you are using an older browser, add vendor prefixes like
-webkit-displayor use a polyfill. - Inline elements: Flexbox does not work on inline elements like
<span>or<a>without changing them to block or inline-block. Convert the element to a<div>or setdisplay: inline-block.
Review your CSS rules to ensure no conflicting styles override the flex properties. Use browser developer tools to inspect the computed styles and verify the values are applied as expected. Adjust the code until the centering behavior matches your requirements.