How to align an embedded map to the center?-CodePudding

I am working with HTML code in Virtual Studio Code I am trying to align an embedded map to the center, how can I do it? This is my HMTML code below

<section >
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1167.5294152864003!2d-61.68113627762967!3d10.173743187947649!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c35981ef58b6ff1:0x2860fb17b3f419ea!2sNP Gas Station!5e0!3m2!1sen!2stt!4v1652554264724!5m2!1sen!2stt" width="800" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

    
</section>

This is my CSS code below

.s1{align-self: center;}

Does anyone have any recommendations for amending the CSS code? I have also tried

.s1{align: center;}
.s1{align-item: center;}
.s1{padding-left: auto; padding-right:auto;)

but these codes are not working.

CodePudding user response：

what you need can be easily achieved by using flexbox, here is the css you need, Hope it helps

.s1{
    display: flex;
    justify-content: center;
    /* align-items: center;
    height: 100vh; */   /*  uncomment these two lines   if you want to center vertically also */
  }

CodePudding user response：

align-self only works in flex.

(Note: if you are looking for horizontal, use justify-self)

align-self justify-self

Example:

.s1 {
  align-self: center;
}

#wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
}

<div id="wrapper">
  <section >
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1167.5294152864003!2d-61.68113627762967!3d10.173743187947649!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c35981ef58b6ff1:0x2860fb17b3f419ea!2sNP Gas Station!5e0!3m2!1sen!2stt!4v1652554264724!5m2!1sen!2stt"
      width="800" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>


  </section>
</div>