Put video in center of page

Somebody gave me the answer to this once but i cant find it because i went of fcc for a while. I am trying to put the video in the center and its not budging :

Add a class or id to your <section class="example" or id=""></section> which contains the video and apply flexbox properties

.example {
display: flex;
flex-direction: column;
align-items: center;
1 Like

i did that originally. did not work. thats why i moved it from the section tag to the iframe tag

Well this works.

1 Like

You can also put it in a div like this

    <div style="text-align:center;">
    <iframe width="420" height="420" class="video" 

how come it works for you and not for me?

Refer this, it works fine, i forked your pen and did the changes i mentioned

so you had to do it twice? one class in the section and another in the iframe itself? can you explain why?

i have a different solution here

basically, I took out your width and height settings (you shouldn’t put these in the html because it makes it hard to make the video size responsive) and then I aligned your iframe.

You can add the width and height back in the css…

No…no, you can delete the styles you had given for the iframe, i think for the class .video if i am not wrong, you can delete those

what do you mean by aligned the iframe? And may i ask why you didnt go with the popular align items, flex and whatnot direction for this. Thank you

this is what i did, (you can check the codepen)

section iframe {
  margin-left: auto;
  margin-right: auto;
  display: block;

flex and whatnot are good if you have an overall design/framework for your page that you are following. But I checked your page and your video is just all by itself in a section so nothing complicated is needed to center it.

i see. but how does putting auto on left and right margins center it? what does auto mean? I thought it meant just make the margin anything

read here:

The left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of margin-left and margin-right are both auto, the calculated space is evenly distributed.

which I got from here:

Thank you very much for this solution.