<h2>text-align center method</h2>
<div class="text_align_box">
  <div class="blue_box"></div>
</div>
<h2>margin 0 auto method</h2>
<div class="yellow_box"></div>
<h2>display flex method</h2>
<div class="flex_box">
  <div class="red_box"></div>
</div>
<h2>position absolute method</h2>
<div class="relative_box">
  <div class="green_box"></div>
</div>
<h2>position absolute with translate method</h2>
<div class="relative_box">
  <div class="orange_box"></div>
</div>
<div class="empty_box"></div>
body {
  font-family: system-ui;
  text-align:center;
}

.text_align_box {
  text-align:center;
}

.blue_box {
  background-color:blue;
  width:150px;
  height:150px;
  display:inline-block;
}

.yellow_box {
  width:150px;
  height:150px;
  background-color:yellow;
  margin:0 auto;
}

.relative_box {
  height:150px;
  position:relative;  
}

.green_box {
  width:150px;
  height:150px;
  background-color:green;
  position:absolute;
  left:50%;
  margin-left:-75px;
/*   transform:translate(-50%,0); */
}

.flex_box {
  display:flex;
  justify-content:center;
}

.red_box {
  background-color:red;
  width:150px;
  height:150px;
  
}

.orange_box {
  background-color:orange;
  width:150px;
  height:150px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.empty_box {
  min-height:300px;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.