CSS layout is centered and aligned, with fixed width on the left and adaptive on the right.

    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>

This method requires knowing the width and height of the child elements.

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

<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 layout is centered and aligned, with fixed width on the left and adaptive on the right."    style="max-width:90%"  style="max-width:90%" title="CSS layout is centered and aligned, with fixed width on the left and adaptive on the right."><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>

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>

This method seems a bit high-end, and you don’t need to pay attention to the child elements at all.

（4）水平居中的方法，父元素：text-align：center

nbsp;html>


    <meta>
    <title>水平垂直居中4</title>
    <style>
        .container{
            background: red;
            width: 100%;
            height: 500px;
            text-align: center;
        }
        .child{
            background: blue;
            width: 300px;
            height: 300px;
            margin: auto;
        }
    </style>


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

<span style="font-size: 14px; font-family: Microsoft YaHei">如果子元素里的文字不要水平居中的话，那么用此法将遇到不少麻烦。<strong>（5）水平居中方法，子元素：margin：0 auto;这个好说，不上代码了</strong>好了，关于居中问题就说这么多，如果你还有更好的方法，请告诉我。<br><strong>二、左侧固定宽度，右侧自适应</strong>这是一个比较常见的需求，下面介绍几种实现方法。
（1）左边定宽，左<a href="http://www.php.cn/code/11748.html" target="_blank">浮动</a>，右边不指定宽。</span>

nbsp;html>


    <meta>
    <title>做固定，右边自适应</title>
    <style>
    body{
        margin: 0;
    }
        .aside{
            background: red;
            width:200px;
            height: 500px;
            float: left;
        }
        .main {
            background: blue;
            height: 500px;
        }
    </style>


    <div>
        我是左边的
    </div>
    <div>
        我是主体
        我是主体
        我是主体
        我是主体
        我是主体
    </div>

I accidentally discovered this method while doing experiments, which was an unexpected surprise.

(2) Use padding to occupy the space

nbsp;html>


    <meta>
    <title>左侧固定右侧自适应</title>
    <style>
        .container {
            padding-left: 200px;
            width: 100%;
            position: relative;
        }
        .left{
            position: absolute;
            left: 0;
            right: 0;
            background: red;
            height: 500px;
            width: 200px;
        }
        .right{
            background: blue;
            width: 100%;
            height: 500px;
        }
    </style>


    <div>
        <div>zuobian</div>
        <div>
            新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。
        </div>
    </div>

Note that absolute is separated from the document flow . .right's 100% is relative to the content width of the parent container, not the entire width.

(3) Parent: display:flex; left fixed width; right flex: 1. ok

nbsp;html>


    <meta>
    <title>左边固定，右边自适应</title>
    <style>
        .container{
            display: flex;
        }
        .left{
            width: 200px;
            height: 500px;
            background: red;
        }
        .right{
            background: blue;
            height: 500px;
            flex: 1;
        }
    </style>


    <div>
        <div>zuobian</div>
        <div>
            新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。
        </div>
    </div>

弹性盒子很强，有木有。但是有的是要加前缀的，哪些要加自己查去，有一次做实验，电脑样式正确，手机就是不对，搞了好半天。

（4）父：display：table;左右：display：table-cell;左：定宽。

nbsp;html>


    <meta>
    <title>左边固定，右边自适应</title>
    <style>
        .container{
            display: table;
        }
        .left{
            width: 200px;
            height: 500px;
            background: red;
            display: table-cell;
        }
        .right{
            background: blue;
            height: 500px;
            display: table-cell;
        }
    </style>


    <div>
        <div>zuobian</div>
        <div>
            新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。罗斯联邦总统普京分别致贺信。
        </div>
    </div>

据说这是一种古老的方法，我咋不知道呢？可能我比较年轻吧！

The above is the detailed content of CSS layout is centered and aligned, with fixed width on the left and adaptive on the right.. For more information, please follow other related articles on the PHP Chinese website!