How to center an iframe horizontally?
HtmlCssIframeAlignmentCenter AlignHtml Problem Overview
Consider the following example: (live demo)
HTML:
<div>div</div>
<iframe></iframe>
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?
Html Solutions
Solution 1 - Html
Add display:block; to your iframe css.
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
iframe {
display: block;
border-style:none;
}
<div>div</div>
<iframe src="data:,iframe"></iframe>
Solution 2 - Html
best way and more simple to center an iframe on your webpage is :
<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>
where width and height will be the size of your iframe in your html page.
Solution 3 - Html
HTML:
<div id="all">
<div class="sub">div</div>
<iframe>ss</iframe>
</div>
CSS:
#all{
width:100%;
float:left;
text-align:center;
}
div.sub, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
Solution 4 - Html
The simplest code to align the iframe element:
<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
Solution 5 - Html
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:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
And add this css:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Disclaimer: none of this is my code, but I've tested it and was happy with the results.
Solution 6 - Html
My simplest solution to this.
iframe {
margin:auto;
display:block;
}
Solution 7 - Html
You can put iframe inside a <div>
<div>
<iframe></iframe>
</div>
It works because it is now inside a block element.
Solution 8 - Html
You can try
<h3 style="text-align:center;"><iframe src=""></iframe></h3>
I hope its useful for you
Solution 9 - Html
In my case solution was on iframe class adding:
display: block;
margin-right: auto;
margin-left: auto;
Solution 10 - Html
If you can't access the iFrame class then add below css to wrapper div.
<div style="display: flex; justify-content: center;">
<iframe></iframe>
</div>
Solution 11 - Html
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;
Solution 12 - Html
>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 & iframe > this is your tag name so change that if you're want any other tag in center
<html >
<head>
<style type=text/css>
div{}
img{
margin: 0 auto;
display:block;
}
iframe{
margin: 0 auto;
display:block;
}
</style>
</head>
<body >
<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"></iframe>
<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180" />
</body>
</html>
Solution 13 - Html
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;" scrolling="yes" frameborder=".6" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
use it and embed facebook in iframe in center of html page