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;
}