絶対的に配置された要素を水平方向および垂直方向の中央に配置するための 3 つの方法-CSSチュートリアル-php.cn

絶対的に配置された要素を水平方向および垂直方向の中央に配置するための 3 つの方法

php中世界最好的语言

リリース： 2018-03-22 15:26:52

オリジナル

5688 人が閲覧しました

今回は、要素を水平方向と垂直方向にセンタリングするための 3 つの絶対配置方法を紹介します。絶対配置された要素の水平方向と垂直方向のセンタリングを実現するための注意事項は何ですか?実際のケースを見てみましょう。

1.css はセンタリングを実装します

欠点: 要素の幅と高さを事前に知っておく必要があります。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%; top: 50%;
            border:1px solid #000;
            background:red;
            margin-top: -200px;    /* 高度的一半 */
            margin-left: -300px;    /* 宽度的一半 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

ログイン後にコピー

2. CSS3 は水平方向と垂直方向の中央揃えを実現します

注: 要素のサイズに関係なく、中央揃えにすることができます。ただし、この書き込み方法はIE8以降にのみ対応しており、モバイル端末では無視して構いません。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%;
            top: 50%;
            border:1px solid #000;
            background:red;
            transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

ログイン後にコピー

3. マージン: センタリングを実現するための自動

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 0;
            top: 0; 
            right: 0; 
            bottom: 0;
            border:1px solid #000;
            background:red;
            margin: auto;    /* 有了这个就自动居中了 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

CSSの動的読み込みの詳細説明

CSS3の扇型アニメーションメニュー処理の詳細説明

CSS3のwebkit-tap-highlight-color属性の使い方

以上が絶対的に配置された要素を水平方向および垂直方向の中央に配置するための 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。