简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Different Ways to Center a Div in HTML and CSS

Different Ways to Center a Div in HTML and CSS

王林
王林Original
2024-07-27 22:19:521122browse

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>

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>

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>

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>

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>

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!

css html auto using this display margin transform table github
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：The Frontend Challenge: Cricket LeagueNext article：The Frontend Challenge: Cricket League

Related articles

See more