Circled number with pure CSS

.circle{
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: skyblue;
  text-align:center;
  line-height: 80px;
}

参考記事

CSSで円を描く方法：文字を中央配置するには？枠線のつけ方は？