SOURCE

console 命令行工具 X clear

                    
>
console
<html>
    <link rel="stylesheet" href="">

    <canvas id="myCanvas" width="200" height="100"></canvas>

    <div>
        <div class="container">
            <div class="left">
                left
            </div>
            <div class="center">
                center
            </div>
            <div class="right">
                right
            </div>
        </div>

        <div class="c1">
            <div class="c11">
                水平垂直居中1
            </div>
        </div>

        <div class="c2">
            <div class="c22">
                水平垂直居中2
            </div>
        </div>

        <div>
            <div class="box div1">1</div>
            <div class="box div2">2</div>
            <div class="box div3">3</div>
        </div>

        <div class="flex">
            <ul class="box9">
                <li class="b">1</li>
                <li class="b">2</li>
                <li class="b">3</li>
                <li class="b">4</li>
                <li class="b">5</li>
                <li class="b">6</li>
                <li class="b">7</li>
                <li class="b">8</li>
                <li class="b">9</li>
            </ul>
            </div>
    </div>

    <script></script>
</html>
.container {
    background-color: yellow;
    height:200px;
    display: flex;
}

.left {
    width:100px;
    background-color: white;
}
.center {
    flex: 1;
    background-color: powderblue;
}

.right {
    width:100px;
    background-color: greenyellow;
}


.c1{
    margin-top: 20px;
    position: relative;
    height: 200px;
    background-color: blanchedalmond;
}
.c11 {
    position: absolute;
    top: 50%;
    left: 50%;
}

.c2 {
    height: 200px;
    background-color: pink;
}
.c22 {
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.box{ 
  width:100px; 
  height:100px; 
  font-size:40px; 
  line-height:100px; 
  color:#fff; 
  text-align:center;
}

.div1{ 
  background:red; 
  margin:0 auto;
}

.div2{ 
  background: green; 
  display: inline-block;
  margin-left: 50%;
}

.div3{ 
  background: blue; 
  display: inline-block;
  margin-left: -200px;
}

.box9 {
    display: flex;
    flex-wrap: wrap;
    height: 600px;
    width: 600px;
    background-color: white;
    padding: 0;
}

.b {
    border-radius: 5px;
    background: skyblue;
    text-align: center;
    list-style: none;
    width: 28%;
    height: 28%;
    margin-right: 4%;
}
.box9 li:nth-child(-n+3) {
    margin-top:4%;
}

.box9 li:nth-child(3n+1) {
    margin-left:4%;
}

.box9 li:nth-child(3n) {
    margin-right:0;
}

.box9 li:nth-child(n+7) {
    margin-bottom:0;
}
.flex {
    display: flex;
    justify-content: center;
}