css position absolute middle

1.child {
2    position: absolute;
3    top: 50%;  
4    left: 50%; 
5    transform: translate(-50%, -50%);
6}

1<style>
2.parent { position: relative; }
3.centered-element {
4  position: absolute;
5  left: 50%;
6  transform: translateX(-50%);
7}
8  
9</style>
10
11<div class="parent">
12 <div class="centered-element">I'm Centered!</div>
13</div>

1position: absolute;
2margin-left: auto;
3margin-right: auto;
4left: 0;
5right: 0;
6text-align: center;

1#child {
2  position: absolute;
3  width: 70px;
4  height: 70px;
5  background-color: blue;
6  left: 50%;
7  top: 50%;
8  border-radius: 50%;
9  transform: translate(-50%, -50%);
10}