<!-- 定位 + margin负值或transform -->
<div class="parent">
  <div class="son son1">1.1</div>
</div>

<div class="parent">
  <div class="son son2">1.2</div>
</div>

<div class="parent">
  <div class="son son22">1.3</div>
</div>

<div class="parent">
  <div class="son son3">1.3宽高不固定</div>
</div>

<!-- table 布局 父元素有flex则会破坏table | 元素有float也会破坏相应布局--> 
<div class="parent parent4">
  <div class="son4">2宽高不固定</div>
  
</div>

<!-- flex 布局 -->
<div class="parent parent5">
  <div class="son son5">3.1宽高不固定</div>
</div>

<div class="parent parent6">
  <div class="son son6">3.2宽高不固定</div>
</div>


<!-- 珊格布局 -->
<div class="parent parent7">
  <div class="son">4</div>
</div>
body{
  // display:flex;
  flex-wrap:wrap;
  text-align: center;
}
.parent{
  width:200px;
  height:200px;
  background:#f00;
  position: relative;
  margin-right:20px;
  margin-bottom:20px;
  .son{
    width:100px;
    height:100px;
    background:#0f0;
    
  }
  .son1{
    //margin负值
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
  }
  
  .son22{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin:auto;
  }
  .son2{
    //transform
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  
  
  .son3{
    width:auto;
    height:auto;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  
  &.parent4{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
  }
  
  .son4{
    background:#0f0;
    width:100px;
    height:100px;
    display:inline;
  }
  
  &.parent5,{
    display:flex;
  }
  .son5{
    margin:auto;
  }
  
  
  &.parent6{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  &.parent7{
    display:grid;
    place-content:center;
  }
  
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.