The [CSS flexbox](https://www.educative.io/answers/what-is-a-css-flexbox) offers powerful alignment options for the users. A **flex container** groups multiple flex items together in order to control their representation. 

Among the many properties offered by the flex container, one of the most widely used properties is `justify-content`.

The value most commonly set to this property is **`center`**, which centrally aligns all of the items within the flex container: 

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.flex-items{
  margin: 10px;
}

<html>
 <head>
 </head>
 <body>

<div class="flex-container">
  <button  class="flex-items">Muhammad</button>
  <button  class="flex-items">Hassan</button>
  <button  class="flex-items">Arshad</button>
</div>
 </body>
</html>

codemirror

justify-content: center

Central alignment of flex container items is achieved with CSS flexbox using the justify-content: center property.