body {
  margin: 0;
  background: linear-gradient(to right, white, gray);
}

.container {
  float: left;
  position: absolute; /* 세로 중앙은 absolute 필요 */
  top: 50%;
  left: 50%;
  margin-top: -82px; /* 세로 높이(84*2=168)의 절반만큼 당김 */
  margin-left: -168px; /* 가로 길이(84*4=336)의 절반만큼 당김*/
}

.avatar {
  width: 64px;
  height: 64px;
  padding: 10px; /* 이미지 사이 간격이 20px 이므로 */
  margin: 0;
  display: inline-block;
  position: relative;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.status_on {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: #4cfe88;
}

.status_off {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: #dbdbdb;
}