DEV Community

Cover image for center a div in html and css
Muhammed Shamal PV
Muhammed Shamal PV

Posted on • Edited on

4

center a div in html and css

Follow me on LinkedIn
Follow me on Github.com

Click & Read

Without Boaring Setion we can redirec to coding!

1. Using Flexbox

Flexbox is a powerful layout tool that makes it easy to center elements 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>Center Div with Flexbox</title>
    <style>
        .container {
            display: flex;
            justify-content: center; /* Horizontal center */
            align-items: center;    /* Vertical center */
            height: 100vh;          /* Full viewport height */
        }

        .centered-div {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">Centered with Flexbox</div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. Using Grid

CSS Grid is another powerful layout system that can easily center elements.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center Div with Grid</title>
    <style>
        .container {
            display: grid;
            place-items: center; /* Center both horizontally and vertically */
            height: 100vh;       /* Full viewport height */
        }

        .centered-div {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">Centered with Grid</div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. Using Absolute Positioning and Transform

This method involves positioning the div absolutely and using transform to center it.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center Div with Absolute Positioning</title>
    <style>
        .container {
            position: relative;
            height: 100vh; /* Full viewport height */
        }

        .centered-div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">Centered with Absolute Positioning</div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

4. Using Margin Auto

Setting margin: auto on an element with a specified width can center it horizontally.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center Div with Margin Auto</title>
    <style>
        .container {
            width: 100%;
            height: 100vh; /* Full viewport height */
            display: flex;
            align-items: center; /* Vertical center */
        }

        .centered-div {
            margin: 0 auto; /* Horizontal center */
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">Centered with Margin Auto</div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

5. Using Table Display

This method uses display: table and display: table-cell to center an element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center Div with Table Display</title>
    <style>
        .container {
            display: table;
            width: 100%;
            height: 100vh; /* Full viewport height */
        }

        .centered-div {
            display: table-cell;
            vertical-align: middle; /* Vertical center */
            text-align: center;     /* Horizontal center */
        }

        .inner-div {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">
            <div class="inner-div">Centered with Table Display</div>
        </div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Byyy
Happy Coding!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Retry later