Fixed Vertical Positioning of CSS Within an Iframe

CSS: Positioning an iFrame to the bottom right of the browser, possible?

try with fixed position

.iframe {
    position: fixed;
    bottom: 10px;
    right: 20px;
    width: 535px;
    height: 380px;
    z-index: 999;
}

Chrome position:fixed inside position:absolute breaking with iframe / video

FIX: add these rules to the position:fixed element:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);

How to align iframe vertically?

Here you go.

http://jsfiddle.net/UFMP7/1/

The trick is to play with the margin and the top offset properties of the nested element.

In this case, given a parent div (A) of 300px, I've offset the nested div (B) by 50% of 300, which is 150. So B is positioned 150px down from the top of the A container. However, we aren't finished. In order to get the center of B to match the center of A, we are required to apply the negative 50% of B's height to the margin-top property. This centers it and the math checks out.

It's even easier if you know the dimensions of everything in pixels.

Feel free to change the A width or height. It'll center dynamically.

div#a
{
    width: 300px;
    height: 300px;
    border-width:1px;
    border-style: solid;

    /* important stuff below */
    display: inline-block;  
}

div#b
{
    width: 60px;
    height: 60px;
    background-color: red;

    /* important stuff below */
    position: relative;
    margin: -30px auto 0 auto;
    top: 50%;  
}

As such, I'd suggest wrapping your iframe in a div. It gives you a bit more control. Then again, I'm one of those excessive div wrappers...

---

Related Topics