How to center an element in CSS?

Question

css

Circle and play button separate images. I tried to do something, but it doesn't work very well.

<div class="content__video2">
    <div class="container">
      <div class="video__inner">
        <div class="circle">

        <img src="img/circle.png">

          
        <img src="img/play.png" class="play">

        
        </div>
      </div>
    </div>
  </div>

.content__video2 {
  display: flex;
  height: 550px;

  background: url(img/2video_bc.jpg) center no-repeat;
  background-size: cover;	
  width: 100%; 
  position: absolute;
  top: 1072px; left: 0px;
  z-index: 100;
  opacity: .85;
  flex-direction: column;
}

.video__inner {
  width: 100%; 
  padding: 202px; 
  text-align: center;
}

.circle {
  display: block;
  position: relative;
  width: 100%;
  
  margin: 0 auto;
}

.play {
  display: block;
  position: absolute;
  top: 28px; left: 252px;
  
}

Please do not scold me for the compiled code, I'm just learning))

Answer 1

https://codepen.io/aliencash/pen/bGWKoyq

Answer 2

If you are learning, then I advise you to study this article: https://css-tricks.com/centering-css-complete-guide/
Asking on similar services and copying the code, you will move slowly :)

Answer 3

here is another example
https://codepen.io/sanyokdb/pen/GRJbzgE

Answer 4

Something like this?