Bagaimana untuk memusatkan Div dalam HTML dan CSS?-tutorial css-php.cn

How to center a Div in HTML and CSS?

Walaupun ia adalah aktiviti biasa dalam pembangunan web, memusatkan div mungkin sukar untuk orang baru. Adalah penting untuk memahami banyak teknik untuk memusatkan div sama ada secara mendatar, menegak atau kedua-duanya. Siaran ini akan membimbing anda melalui beberapa kaedah untuk mencapai ini, bersama-sama dengan penjelasan dan contoh kod.

Pengenalan

Satu komponen penting untuk membuat reka bentuk yang menyenangkan dari segi estetika dan seimbang ialah memusatkan komponen pada halaman web. Keupayaan untuk memusatkan div adalah penting, tanpa mengira kerumitan antara muka pengguna yang anda buat, walaupun untuk halaman web yang ringkas. Siaran ini akan membincangkan banyak pendekatan—konvensional dan canggih—untuk memusatkan div dalam HTML dan CSS.

Mengapa Memusatkan Div?

Memusatkan div boleh meningkatkan reka letak dan kebolehbacaan halaman web anda. Ia membantu dalam mencipta reka bentuk yang seimbang dan memastikan kandungan itu mudah diakses oleh pengguna. Sama ada kotak teks, imej atau borang, memusatkan elemen ini boleh menjadikan tapak web anda kelihatan lebih profesional dan teratur.

Kaedah untuk Memusatkan Div

Terdapat beberapa kaedah untuk memusatkan div dalam HTML dan CSS. Kami akan membincangkan teknik berikut:

Menggunakan margin: auto;

Menggunakan Flexbox

Menggunakan Reka Letak Grid

Menggunakan Transformasi CSS

Menggunakan Jajaran Teks

Menggunakan Kedudukan dan Margin Negatif

Setiap kaedah mempunyai kelebihan dan kes penggunaannya. Mari selami setiap satu dengan penjelasan terperinci dan contoh kod.

Menggunakan margin: auto;

Judar: auto; kaedah adalah salah satu cara paling mudah untuk memusatkan div secara mendatar. Ia berfungsi dengan menetapkan jidar kiri dan kanan kepada auto, yang mengagihkan sama rata ruang yang tersedia pada kedua-dua belah div.

Pemusatan Mendatar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Horizontally</title>
    <style>
        .center-horizontally {
            width: 50%;
            margin: 0 auto;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-horizontally">
        This div is centered horizontally.
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, div dipusatkan secara mendatar menggunakan margin: 0 auto;. Lebar div ditetapkan kepada 50%, jadi ia mengambil separuh daripada ruang yang tersedia, dengan jidar yang sama pada kedua-dua belah.

Pemusatan Menegak

Untuk memusatkan div secara menegak menggunakan margin: auto;, anda perlu menetapkan ketinggian bekas induk dan div itu sendiri. Kaedah ini tidak semudah pemusatan mendatar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Vertically</title>
    <style>
        .container {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .center-vertically {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center-vertically">
            This div is centered vertically.
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan bekas fleksibel untuk memusatkan div secara menegak. Ketinggian: 100vh; memastikan bahawa bekas mengambil ketinggian penuh port pandangan. Paparan: flex;, justify-content: center;, dan align-item: center; sifat menyelaraskan div secara mendatar dan menegak dalam bekas.

Menggunakan Flexbox

Flexbox ialah model susun atur moden yang menyediakan cara yang cekap untuk menjajarkan dan mengagihkan ruang antara item dalam bekas. Ia memudahkan proses memusatkan elemen, secara mendatar dan menegak.

Pemusatan Mendatar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Horizontally with Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
        }
        .center-flex-horizontally {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="center-flex-horizontally">
            This div is centered horizontally with Flexbox.
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan Flexbox untuk memusatkan div secara mendatar. Paparan: flex; dan justify-content: pusat; sifat bekas memastikan bahawa div berada di tengah.

Pemusatan Menegak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Vertically with Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .center-flex-vertically {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="center-flex-vertically">
            This div is centered vertically with Flexbox.
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan Flexbox untuk memusatkan div secara menegak. The align-item: tengah; harta bekas memastikan bahawa div dipusatkan secara menegak dalam bekas.

Memusatkan Kedua-dua Secara Mendatar dan Menegak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div with Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .center-flex {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="center-flex">
            This div is centered both horizontally and vertically with Flexbox.
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan kedua-dua justify-content: center; dan align-item: tengah; untuk memusatkan div secara mendatar dan menegak dalam bekas.

Menggunakan Reka Letak Grid

Layout Grid CSS ialah satu lagi sistem susun atur berkuasa yang membolehkan anda membuat reka letak yang kompleks dengan mudah. Ia menyediakan cara yang mudah untuk memusatkan elemen.

Pemusatan Mendatar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Horizontally with Grid</title>
    <style>
        .grid-container {
            display: grid;
            place-items: center;
            height: 100vh;
        }
        .center-grid-horizontally {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="center-grid-horizontally">
            This div is centered horizontally with Grid.
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan Reka Letak Grid CSS untuk memusatkan div secara mendatar. Tempat-item: pusat; hartanah memusatkan div secara mendatar dan menegak, tetapi memandangkan kami memfokuskan pada pemusatan mendatar, ia mencapai hasil yang diingini.

Pemusatan Menegak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Vertically with Grid</title>
    <style>
        .grid-container {
            display: grid;
            place-items: center;
            height: 100vh;
        }
        .center-grid-vertically {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

 <div class="grid-container">
        <div class="center-grid-vertically">
            This div is centered vertically with Grid.
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan Reka Letak Grid CSS untuk memusatkan div secara menegak. Tempat-item: pusat; harta memusatkan div secara mendatar dan menegak.

Memusatkan Kedua-dua Secara Mendatar dan Menegak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div with Grid</title>
    <style>
        .grid-container {
            display: grid;
            place-items: center;
            height: 100vh;
        }
        .center-grid {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="center-grid">
            This div is centered both horizontally and vertically with Grid.
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, item tempat: pusat; harta memusatkan div secara mendatar dan menegak dalam bekas.

Menggunakan Transformasi CSS

Transformasi CSS membolehkan anda memanipulasi penampilan dan kedudukan elemen. Anda boleh menggunakan sifat transform untuk memusatkan div.

Pemusatan Mendatar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Horizontally with Transform</title>
    <style>
        .center-transform-horizontally {
            width: 50%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-transform-horizontally">
        This div is centered horizontally with Transform.
    </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kiri: 50%; dan mengubah: translateX(-50%); sifat memusatkan div secara mendatar. Kedudukan: mutlak; harta benda meletakkan div relatif kepada nenek moyang kedudukan terdekatnya.

Pemusatan Menegak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Vertically with Transform</title>
    <style>
        .center-transform-vertically {
            width: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-transform-vertically">
        This div is centered vertically with Transform.
    </div>
</body>
</html>

Salin selepas log masuk

In this example, the top: 50%; and transform: translateY(-50%); properties center the div vertically. The position: absolute; property positions the div relative to its nearest positioned ancestor.

Centering Both Horizontally and Vertically

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div with Transform</title>
    <style>
        .center-transform {
            width: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-transform">
        This div is centered both horizontally and vertically with Transform.
    </div>
</body>
</html>

Salin selepas log masuk

In this example, the top: 50%;, left: 50%;, and transform: translate(-50%, -50%); properties center the div both horizontally and vertically. The position: absolute; property positions the div relative to its nearest positioned ancestor.

Using Text-Align

The text-align property is often used to center text, but it can also be used to center block elements within a container.

Horizontal Centering

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Horizontally with Text-Align</title>
    <style>
        .container {
            text-align: center;
        }
        .center-text-align {
            display: inline-block;
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center-text-align">
            This div is centered horizontally with Text-Align.
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

In this example, the container has text-align: center;, and the div has display: inline-block;. This centers the div horizontally within the container.

Using Position and Negative Margin

Using position and negative margins is another method to center a div both horizontally and vertically.

Centering Both Horizontally and Vertically

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div with Position and Negative Margin</title>
    <style>
        .center-position {
            width: 50%;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px; /* Half of the height */
            margin-left: -25%; /* Half of the width */
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-position">
        This div is centered both horizontally and vertically with Position and Negative Margin.
    </div>
</body>
</html>

Salin selepas log masuk

In this example, the top: 50%; and left: 50%; properties position the div in the middle of the container. The margin-top: -100px; and margin-left: -25%; properties center the div by offsetting it by half of its height and width, respectively.

Conclusion

Centering a div in HTML and CSS can be accomplished using various methods. Each technique has its strengths and is suitable for different scenarios. Whether you choose to use margin: auto;, Flexbox, Grid Layout, CSS Transform, Text-Align, or Position and Negative Margin, understanding these methods will help you create balanced and visually appealing designs.

By mastering these techniques, you can enhance the layout and readability of your web pages, making them more user-friendly and professional. Experiment with these methods to find the one that best suits your needs and the specific requirements of your projects.

References

MDN Web Docs - CSS: Cascading Style Sheets

CSS-Tricks - A Complete Guide to Flexbox

CSS-Tricks - A Complete Guide to Grid

W3Schools - CSS

MDN Web Docs - Using CSS Flexible Boxes

MDN Web Docs - CSS Grid Layout

By following this guide, you can center a div with confidence, regardless of the complexity of your layout. Happy coding!

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