How To Centre Items With Vanilla CSS

Initial the HTML

<div class='container'>
  <div class='item'>
    <div class='inner-item1'></div>
    <div class='inner-item2'></div>
  </div>
</div>

Initial the CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100ww;
  height: 100vh;
  background: hsl(1, 5%, 80%);

}

.item {
  width: 600px; 
  height: 300px;
  background-color: hsl(150, 2%, 50%);
  columns: 2;
}

.inner-item1 {
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

.inner-item2 {
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

The initial code on CodePen

Centre the item horizontally and vertically

Centre the item with CSS grid

Add the following code to the container:

.container {
  width: 100ww;
  height: 100vh;
  background: hsl(1, 5%, 80%);
    
  display: grid;
  place-items: center;
}

Centre the item with CSS flex

Add the following code to the container:

.container {  
  display: flex;
  justify-content: center;
  align-items: center;
}

Centre the item horizontally

Centre the item with CSS margin

Add the following code to the item:

.item {
  margin: 0 auto;
}

Centre the item with CSS margin-inline

Add the following code to the item:

.item {
  margin-inline: auto;
}

Centre 2 inner items horizontally

Add the following code to the inner items:

.inner-item1 {
  margin-left: auto;
}
.inner-item2 {
  margin-right: auto;
}