HTML と CSS で Div を中央に配置するさまざまな方法-CSSチュートリアル-php.cn

HTML と CSS で Div を中央に配置するさまざまな方法

王林

リリース： 2024-07-27 22:19:52

オリジナル

1122 人が閲覧しました

Different Ways to Center a Div in HTML and CSS

LinkedIn でフォローしてください
Github.com でフォローしてください

クリックして読んでください

Boaring Setion がなければ、コーディングにリダイレクトできます!

1. フレックスボックスの使用

Flexbox は、水平方向と垂直方向の両方で要素を簡単に中央揃えできる強力なレイアウトツールです。

例：

<!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. グリッドの使用

CSS グリッドは、要素を簡単に中央に配置できるもう 1 つの強力なレイアウトシステムです。

例：

<!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. 絶対配置と変換の使用

この方法では、div を絶対的に配置し、transform を使用して中心に配置します。

例：

<!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. 証拠金自動の使用

指定された幅を持つ要素に margin: auto を設定すると、要素を水平方向に中央揃えにすることができます。

例：

<!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. テーブルディスプレイの使用

このメソッドは、display: table と display: table-cell を使用して要素を中央に配置します。

例：

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

ログイン後にコピー

バイイ
コーディングを楽しんでください!

以上がHTML と CSS で Div を中央に配置するさまざまな方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。