HTML と CSS で Div を中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

How to center a Div in HTML and CSS?

Web 開発では一般的な作業ですが、div を中央に配置するのは初心者にとっては難しいかもしれません。 div を水平方向、垂直方向、またはその両方の中央に配置するための多くのテクニックを理解することが重要です。この投稿では、これを実現するためのさまざまな方法を、説明とコードサンプルとともに説明します。

はじめに

見た目が美しく、バランスのとれたデザインを作成するために不可欠な要素は、コンポーネントを Web ページの中央に配置することです。作成しているユーザーインターフェイスの複雑さに関係なく、単純な Web ページであっても、div を中央に配置できることは不可欠です。この投稿では、HTML と CSS 内で div を中央に配置するための、従来型と最先端の両方の多くのアプローチについて説明します。

Div を中央に配置する理由

div を中央に配置すると、Web ページのレイアウトと読みやすさが向上します。これは、バランスの取れたデザインを作成するのに役立ち、ユーザーがコンテンツに簡単にアクセスできるようにします。テキストボックス、画像、フォームのいずれであっても、これらの要素を中央に配置すると、Web サイトがよりプロフェッショナルで整理された見た目になります。

Div を中央に配置するメソッド

HTML と CSS で div を中央に配置する方法はいくつかあります。次のテクニックについて説明します:

マージンの使用: 自動;

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

グリッドレイアウトの使用

CSS 変換の使用

テキスト整列の使用

ポジションとマイナスマージンの使用

それぞれの方法には利点と使用例があります。詳細な説明とコード例を使用して、それぞれについて詳しく見ていきましょう。

マージンの使用: 自動;

マージン: 自動。メソッドは、div を水平方向に中央揃えにする最も簡単な方法の 1 つです。これは、左右のマージンを auto に設定することで機能し、div の両側に利用可能なスペースを均等に分配します。

水平方向のセンタリング

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

ログイン後にコピー

上記の例では、margin: 0 auto; を使用して div が水平方向に中央揃えされています。 div の幅は 50% に設定されているため、使用可能なスペースの半分が占有され、両側のマージンが均等になります。

垂直センタリング

margin: auto; を使用して div を垂直方向の中央に配置するには、親コンテナと div 自体の高さを設定する必要があります。この方法は、水平方向の中央揃えほど単純ではありません。

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

ログイン後にコピー

この例では、フレックスコンテナを使用して div を垂直方向の中央に配置します。高さ: 100vh;コンテナがビューポートの高さ全体を占めるようにします。表示: flex;、justify-content: center;、および align-items: center;プロパティは、コンテナ内で div を水平方向と垂直方向の両方に配置します。

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

Flexbox は、コンテナ内のアイテム間でスペースを配置および分配する効率的な方法を提供する最新のレイアウトモデルです。これにより、水平方向と垂直方向の両方で要素を中央に配置するプロセスが簡素化されます。

水平方向のセンタリング

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

ログイン後にコピー

この例では、Flexbox を使用して div を水平方向に中央揃えにします。ディスプレイ: フレックス;そして justify-content: center;コンテナのプロパティにより、div が中央に配置されるようになります。

垂直センタリング

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

ログイン後にコピー

この例では、Flexbox を使用して div を垂直方向の中央に配置します。 align-items: 中央;コンテナーのプロパティにより、div がコンテナー内で垂直方向の中央に配置されるようになります。

水平方向と垂直方向の両方で中央揃え

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

ログイン後にコピー

この例では、justify-content: center; の両方を使用します。および align-item: 中央; div をコンテナ内で水平方向と垂直方向の中央に配置します。

グリッドレイアウトの使用

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

ログイン後にコピー

この例では、CSS グリッドレイアウトを使用して div を水平方向に中央揃えにします。場所アイテム: 中央;プロパティは div を水平方向と垂直方向の両方で中央揃えにしますが、水平方向の中央揃えに焦点を当てているため、望ましい結果が得られます。

垂直センタリング

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

ログイン後にコピー

この例では、CSS グリッドレイアウトを使用して div を垂直方向の中央に配置します。場所アイテム: 中央;

プロパティは、div を水平方向と垂直方向の両方で中央に配置します。

水平方向と垂直方向の両方で中央揃え

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

ログイン後にコピー

この例では、place-items: center;プロパティは、コンテナ内の水平方向と垂直方向の両方で div を中央に配置します。

CSS 変換の使用

CSS Transform を使用すると、要素の外観と位置を操作できます。変換プロパティを使用して div を中央に配置できます。

水平方向のセンタリング

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

ログイン後にコピー

この例では、左: 50%;そして変換：translateX(-50%);プロパティは div を水平方向に中央揃えにします。位置: 絶対的。プロパティは、最も近い位置にある祖先を基準にして div を配置します。

垂直方向のセンタリング

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

ログイン後にコピー

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>

ログイン後にコピー

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>

ログイン後にコピー

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>

ログイン後にコピー

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!

以上がHTML と CSS で Div を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。