Different Ways to Center a Div in HTML and CSS-CSS Tutorial-php.cn

Different Ways to Center a Div in HTML and CSS

王林

Release： 2024-07-27 22:19:52

Original

1037 people have browsed it

Different Ways to 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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

Byyy
Happy Coding!

The above is the detailed content of Different Ways to Center a Div in HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!