<div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
</div>
*{ padding:0; margin:0; }
li{ list-style:none; }

div{
  display:flex; /* display flex로 설정 */
  flex-direction: colum; /* 가로 정렬 (행) */
  justify-content: center; /* flex-derction 방향 가운데 정렬*/
  align-items:center;
}

ul{
  height:100vh;
  /*li 가운데 정렬*/
  display:flex; /* display flex로 설정 */
  flex-direction: row; /* 가로 정렬 (행) */
  justify-content: center; /* flex-derction 방향 가운데 정렬*/
  align-items:center; /* justify와 수직축 방향 가운데 정렬 */
  flex-wrap:wrap;
  
  background:#E4DCCF;
  
  width:300px;
}
li{ 
  
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  width:100px;
  height:80px;
  background:#7D9D9C;
  color:#E4DCCF;
  margin:10px;
  font-size:20px;
  font-weight:bold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.