概述

居中布局是最基本的布局方式，下面会通过示例展示如何设置css样式实现居中布局

居中示例

<body>
    <div style="display: flex;">
        <!--不设置样式，左上角对齐-->
        <div class="first-div">
            <div class="second-div">
            </div>
        </div>
        <div class="first-div center-one">
            <div class="second-div"> 
            </div>
        </div>
        <div class="first-div" style="display: flex;">
            <div class="second-div center-inner"> 
            </div>
        </div>
    </div>
    <style>
        .first-div
        {
            width:100px;height: 100px; 
            margin-left:10px;
            background: gray;
           
        }
        .second-div
        {
            width:50px;height: 50px;background: green;
        }
        .center-one
        {
           
            display: flex; 
            align-items: center;
            justify-content: center;
        }
        .center-inner
        {
            margin: auto;
        }
    </style>
</body>

居中分析

方法一：在父元素使用如下样式
- display: flex;
- align-items: center; //上下居中
- justify-content: center;//左右居中

父div使用display: flex;
子元素使用margin: auto;
如果只需要上下居中使用margin-top:auto, margin-bottom:auto

居右布局示例

<body>
    <div style="display: flex;">
        <!--不设置样式，左上角对齐-->
        <div class="first-div">
            <div class="second-div">
            </div>
        </div>
        <div class="first-div">
            <div class="second-div right-one"> 
            </div>
        </div>
        <div class="first-div right-two">
            <div class="second-div"> 
            </div>
        </div>
    </div>
    <style>
        .first-div
        {
            width:100px;height: 100px; 
            margin-left:10px;
            background: gray;
           
        }
        .second-div
        {
            width:50px;height: 50px;background: green;
        }
        .right-one
        {
           
            float: right;
        }
        .right-two
        {
            display: flex;
            justify-content: right;
        }
    </style>
</body>

居右分析

方法一：在子元素使用样式 float:right即可
方法二：在父元素使用样式
- ```
display: flex;
```
- ```
justify-content: right;
```