Cara Berbeza untuk Memusatkan Div dalam HTML dan CSS-tutorial css-php.cn

Cara Berbeza untuk Memusatkan Div dalam HTML dan CSS

王林

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

asal

1148 orang telah melayarinya

Different Ways to Center a Div in HTML and CSS

Ikuti saya di LinkedIn
Ikuti saya di Github.com

Klik & Baca

Tanpa Boaring Setion kami boleh redirect ke pengekodan!

1. Menggunakan Flexbox

Flexbox ialah alat susun atur berkuasa yang memudahkan untuk memusatkan elemen secara mendatar dan menegak.

Contoh:

<!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>

Salin selepas log masuk

2. Menggunakan Grid

Grid CSS ialah satu lagi sistem susun atur berkuasa yang boleh memusatkan elemen dengan mudah.

Contoh:

<!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>

Salin selepas log masuk

3. Menggunakan Kedudukan dan Transformasi Mutlak

Kaedah ini melibatkan meletakkan div secara mutlak dan menggunakan transformasi untuk memusatkannya.

Contoh:

<!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>

Salin selepas log masuk

4. Menggunakan Auto Margin

Menetapkan jidar: auto pada elemen dengan lebar yang ditentukan boleh memusatkannya secara mendatar.

Contoh:

<!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>

Salin selepas log masuk

5. Menggunakan Paparan Jadual

Kaedah ini menggunakan paparan: jadual dan paparan: sel jadual untuk memusatkan elemen.

Contoh:

<!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>

Salin selepas log masuk

Byyy
Selamat Mengekod!

Atas ialah kandungan terperinci Cara Berbeza untuk Memusatkan Div dalam HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!