How to center an iframe horizontally

Question

Consider the following example   live demo   HTML    lt div gt div lt  div gt   lt iframe gt  lt  iframe gt    CSS   div  iframe       width  100px      height  50px      margin  0 auto      background-color   777      Result     Why the iframe is not centrally aligned like the div  How could I centrally align it

User · Answer

If you can t access the iFrame class then add below css to wrapper div   lt div style  quot display  flex  justify-content  center  quot  gt       lt iframe gt  lt  iframe gt   lt  div gt

User · Answer

If you are putting a video in the iframe and you want your layout to be fluid  you should look at this webpage  Fluid Width Video  Depending on the video source and if you want to have old videos become responsive your tactics will need to change   If this is your first video  here is a simple solution    x000D   x000D   lt div class  videoWrapper  gt  x000D       lt  -- Copy  amp  Pasted from YouTube -- gt  x000D       lt iframe width  560  height  349  src  http   www youtube com embed n dZNLr2cME rel 0 amp hd 1  frameborder  0  allowfullscreen gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    And add this css    x000D   x000D   videoWrapper   x000D   position  relative  x000D   padding-bottom  56 25      16 9    x000D   padding-top  25px  x000D   height  0  x000D    x000D   videoWrapper iframe   x000D   position  absolute  x000D   top  0  x000D   left  0  x000D   width  100   x000D   height  100   x000D    x000D   x000D   x000D    Disclaimer  none of this is my code  but I ve tested it and was happy with the results

User · Answer

best way and more simple to center an iframe on your webpage is     lt p align  center  gt  lt iframe src  http   www google com   width 500 height  500  gt  lt  iframe gt  lt  p gt    where width and height will be the size of your iframe in your html page

User · Answer

My simplest solution to this  iframe       margin auto      display block

User · Answer

In my case solution was on iframe class adding       display  block      margin-right  auto      margin-left  auto

User · Answer

You can try    lt h3 style  text-align center   gt  lt iframe src    gt  lt  iframe gt  lt  h3 gt    I hope its useful for you   link

User · Answer

Here I have put snippet for all of you who are suffering to make iframe or image in center of the screen horizontally     Give me THUMBS UP VOTE if you like         style   img  amp  iframe   this is your tag name so change that if you re want any other tag in  center    x000D   x000D   lt html  gt  x000D    lt head gt   x000D               lt style type text css gt  x000D              div   x000D              img  x000D                   margin  0 auto  x000D            display block  x000D              x000D    iframe   x000D    margin  0 auto  x000D    display block  x000D      x000D       x000D               lt  style gt  x000D   lt  head gt  x000D    lt body  gt  x000D              x000D      lt iframe src  https   test-videos co uk vids bigbuckbunny mp4 h264 360 Big Buck Bunny 360 10s 1MB mp4  width  320  height  180  frameborder  0  allowfullscreen  allowfullscreen  gt  lt  iframe gt   x000D      x000D      lt img src  http   commondatastorage googleapis com gtv-videos-bucket sample images BigBuckBunny jpg  width  320  height  180     gt  x000D               lt  body gt   x000D               lt  html gt  x000D   x000D   x000D

User · Answer

The simplest code to align the iframe element    lt div align  center  gt  lt iframe width  560  height  315  src  www youtube com  frameborder  1px  gt  lt  iframe gt  lt  div gt

User · Answer

HTML    lt div id  all  gt       lt div class  sub  gt div lt  div gt       lt iframe gt ss lt  iframe gt   lt  div gt    CSS    all      width 100       float left      text-align center    div sub  iframe       width  100px      height  50px      margin  0 auto      background-color   777

User · Answer

Add display block  to your iframe css   x000D   x000D  div  iframe       width  100px      height  50px      margin  0 auto      background-color   777     iframe       display  block      border-style none    x000D   lt div gt div lt  div gt   lt iframe src  data  iframe  gt  lt  iframe gt  x000D   x000D   x000D

User · Answer

According to http   www w3schools com css css align asp  setting the left and right margins to auto specifies that they should split the available margin equally  The result is a centered element   margin-left  auto margin-right  auto

User · Answer

You can put iframe inside a  lt div gt    lt div gt       lt iframe gt  lt  iframe gt   lt  div gt    It works because it is now inside a block element

[html] How to center an iframe horizontally?

Examples related to html

Examples related to css

Examples related to iframe

Examples related to alignment

Examples related to center-align