CSS で要素を親要素の中央に表示する方法についての簡単な説明-CSSチュートリアル-php.cn

CSS で要素を親要素の中央に表示する方法についての簡単な説明

高洛峰

リリース： 2017-02-22 11:46:04

オリジナル

1772 人が閲覧しました

CSS で要素を垂直方向の中央に配置する方法についての質問は、すでによくある質問です。新人でもベテランでも、面接の際によく聞かれる質問です。 2 日前に Flex ビデオチュートリアルを見ていたところ、要素の中央揃えについて言及されていたので、今日はいくつかの一般的な方法を見ていきます。欠点があれば批判して修正してください (すべてのコードは私が入力したものであり、利用可能です)

1. 水平方向のセンタリング (マージン: 0 auto;)

これについては、トレーニング中であっても、誰もが最も慣れていないはずです。授業はまだ自習です。これは教師が最初に教える方法（水平方向）のはずですが、ラップされた要素は浮動属性を持つことができないという前提があります。それ以外の場合、このプロパティは無効になります。具体的には以下のコードになります:

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
        }
        item{            margin:0 auto;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>
<body>
    <p class="box">
        <p class="item"></p>
     </p>
</body>

ログイン後にコピー

<br>

ログイン後にコピー

浅谈css中一个元素如何在其父元素居中显示

2. 水平方向のセンタリング(text-align: center;)

この属性がfloatでない場合は、inline/inline-blockに変換できます。 . 次に、親要素に text-align:center; 属性を追加して中央揃えにします

3. 水平方向と垂直方向の中央揃え (1) 子要素は親要素に対して相対的に配置されます。マージン値が減算されます。自身の幅と高さの半分です浅谈css中一个元素如何在其父元素居中显示

このメソッドには、子要素自体の幅と高さを知っている必要があるため、一定の制限があります

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;            text-align:center;
        }
        item{            display:inline/inline-block;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>
<body>
    <p class="box">
        <p class="item"></p>
     </p>
</body>

ログイン後にコピー

4. 2) 子要素は親要素に対する相対位置であり、マージン値は自動です浅谈css中一个元素如何在其父元素居中显示

この方法は要素の幅と高さに制限されず、使いやすい(推奨)です

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
           position: relative;
        }
        item{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            width: 100px;
            height: 100x;
            background: green;
        }</style><body>
    <p class="box">
        <p class="item"></p>
     </p></body>

ログイン後にコピー

5. 水平方向と垂直方向のセンタリング (3) 表示: table-cell 浅谈css中一个元素如何在其父元素居中显示

この方法は、要素をテーブルスタイルに変換し、テーブルスタイルを使用してセンタリングする方法です (推奨)

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
           position: relative;
        }
        item{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top:0;
            margin: auto;
            width: 100px;
            height: 100x;
            background: green;
        }</style><body>
    <p class="box">
        <p class="item"></p>
     </p></body>

ログイン後にコピー

6. 水平方向と垂直方向のセンタリング (4) 絶対配置とトランスフォーム浅谈css中一个元素如何在其父元素居中显示

この方法は、CSS3 の変形を使用することを使用します。もちろん、素晴らしいものには互換性の問題があることはご存知でしょう

7. 水平方向と垂直方向の中央揃え (5) CSS3 の flex 属性浅谈css中一个元素如何在其父元素居中显示

この属性は非常に便利ですが、互換性の問題が確実にあります。注意してください

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
        }
        item{
            margin:0 auto;
            width: 100px;
            height: 100x;
            background: green;
        }</style><body>
    <p class="box">
        <p class="item"></p>
     </p></body>

ログイン後にコピー

突然、センタリングの方法がとても簡単だと感じましたか？！！！！！！！！！！！！浅谈css中一个元素如何在其父元素居中显示