布局

飞翼布局

飞翼布局

<div class="box">
 <div class="box-left"></div>
 <div class="center"></div>
 <div class="box-right"></div>
</div>

 .box{
  display: flex;
  height: 200px;
 }
 .box-left{
  flex-basis: 100px;
  background: #FF6A6A;
 }
 .center{
  flex-grow: 1;
  background: #00CD66;
 }
 .box-right {
  flex-basis: 100px;
  background: #FF6A6A;
 }

垂直居中

垂直居中(flex)

<div class="box">
 <div class="center"></div>
</div>

 .box{
  display: flex;
    align-items: center; /* 垂直属性 */
    justify-content: center;
  height: 200px;
  border: 1px #1c1d21 solid;
  border-radius: 5px;
 }
 
 .center{
  width: 100px;
  height: 100px;
  background: #00CD66;
 }
 

垂直居中(position : top(50%) - height/2 ; left(50%) - width/2)

<div class="box">
 <div class="center"></div>
</div>

 .box{
  position: relative;
  height: 200px;
  border: 1px #1c1d21 solid;
  border-radius: 5px;
 }
 
 .center{
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background: #00CD66;
 }
 

垂直居中(position : left: 50% ;top: 50%;margin-left: -50px; margin-top: -50px)

<div class="box">
 <div class="center"></div>
</div>

 .box{
  position: relative;
  height: 200px;
  border: 1px #1c1d21 solid;
  border-radius: 5px;
 }
 
 .center{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  background: #00CD66;
 }
 

垂直居中(transform: translateY(50%))

<div class="box">
 <div class="center"></div>
</div>

 .box{
  height: 200px;
  border: 1px #1c1d21 solid;
  border-radius: 5px;
 }
 
 .center{
  transform: translateY(50%);
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background: #00CD66;
 }