Center a Div

Are you tired of struggling with divs that stubbornly sit at the corner of your web page, refusing to be centered? Fret not! Centering a div is a common task in web development, and with a little CSS magic, you can achieve perfect alignment effortlessly.

The HTML Structure

Before we delve into the CSS, let's set up a simple HTML structure:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="centered-div">
        <!-- Your content goes here -->
    </div>
</body>
</html>

The CSS Code

Now, create a separate CSS file (styles.css) and apply the following styles:

/* styles.css */

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 100% of the viewport height */
    margin: 0; /* Remove default margin */
}

.centered-div {
    /* Your div-specific styles go here */
}

In this CSS code, we use Flexbox to center our div both horizontally and vertically. Here's how it works:

display: flex; on the body, the element makes it a flex container.
justify-content: center; centers content along the horizontal axis (horizontally).
align-items: center; centers content along the vertical axis (vertically).
height: 100vh; ensures that the body takes up the full viewport height, which helps centering in all situations.
margin: 0; removes any default margin, preventing unwanted spacing around the centered div.

Customize Your Div

Inside the .centered-div, you can add your content and customize the div with your specific styles.

.centered-div {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Additional styling for your div */
}

With these simple steps, your div will be perfectly centered on the page, and you can now focus on crafting beautiful web content without worrying about alignment issues. Happy coding!

Center a Div: A Simple CSS Guide

Table of contents

The HTML Structure

The CSS Code

Customize Your Div

Subscribe to my newsletter

Arbab Hassan

Arbab Hassan