CSS レイアウトは中央揃えで配置され、左側は固定幅、右側は適応幅になります。

    CSS页面布局是web前端开发的最基本的技能，本文将介绍一些常见的布局方法，涉及到盒子布局，column布局，flex布局等内容。本文中，你可以看到一些水平垂直居中的方法，左侧固定宽度，右侧自适应的一些方法。如果你有更多关于布局方面的技巧，欢迎留言交流。一、神奇的居中    经常看到有一些面试题问如何实现水平垂直居中，还要求用多种方法。唉唉唉！下面介绍一下我所知道的实现居中的方法。（1）父元素relative;子元素absolute，top:50%;left:50%;margin-left:-自己宽度的一半;margin-right:-自己高度的一半。

nbsp;html>


    <meta>
    <title>水平垂直居中2</title>
    <style>
        .container{
            width: 100%;
            height: 500px;
            background: red;
            position: relative;
        }
        .child{
            width: 300px;
            height: 300px;
            background: blue;
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -150px;
        }
    </style>


    <div>
        <div></div>
    </div>

このメソッドでは、子要素の幅と高さを知っている必要があります。

（2）父元素：relative;子元素：absolute;top：50%;left:50%;transform:translate(-50%,-50%);

nbsp;html>


    <meta>
    <title>水平垂直居中3</title>
    <style>
        .container{
            background: red;
            width: 100%;
            height: 500px;
            position: relative;
        }
        .child{
            background: blue;
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>


    <div>
        <div></div>
    </div>

rree

<span style="font-size: 14px; font-family: Microsoft YaHei">此法跟上面的相似，但是用到了transform，好处是不需要知道子元素的宽高,兼容性方面我查了一下，看着办吧。<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/013/e6f851faee59ab9abba51c883c21e708-0.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS レイアウトは中央揃えで配置され、左側は固定幅、右側は適応幅になります。"    style="max-width:90%"  style="max-width:90%" title="CSS レイアウトは中央揃えで配置され、左側は固定幅、右側は適応幅になります。"><br><strong>（3）父元素：<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: flex;justify-content: center;align-items: center;</strong></span>

このメソッドは少し高度なようで、子要素にまったく注意を払う必要はありません。

あーるーるーるーるーるーるーるー

実験中に偶然この方法を発見したのですが、嬉しい驚きでした。

(2) paddingを使用して座席を占有します

nbsp;html>


    <meta>
    <title>水平垂直居中1</title>
    <style>
        .container{
            width: 100%;
            height: 400px;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child{
            width: 300px;
            height: 300px;
            background: blue;
        }
    </style>


    <div>
        <div></div>
    </div>

絶対はドキュメントフローから分離されていることに注意してください。 .right の 100% は、幅全体ではなく、親コンテナのコンテンツの幅を基準としています。

(3) 親: 表示: フレックス、左固定幅: 1。わかりました

れーるーるーるーるーるーるーるー

以上がCSS レイアウトは中央揃えで配置され、左側は固定幅、右側は適応幅になります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。