Div align middle inside in rotated div

Question

I've made the following JSfiddle to see my actual problem. I want a rotated div to be full width.

I already achieved that by giving it 120% width and make overflow:hidden in the container (I wanted the rotated div not to have empty spaces in corners).

Now I want to place something in the middle. I tried with margin:0 auto but because its 120% it goes to the right center. I want to be exactly in the middle of the screen (and on different screens of course)

Here is the code and the jsfiddle :

<div class="container">
    <div class="rotaded">
        <p>
            <img src="http://imgcdn.nrelate.com/image_cache/www.valcun.com/fc95c92475a927c2bc5130b343e2c5f8_thumb_short-url.png">
        </p>
    </div>
</div>

CSS:

.container {
    overflow:hidden;
    width:100%;
}
.rotaded {
    background:red;
    width:120%;
    height:200px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}
p {
    width:100px;
    height:200px;
    position:relative;
    top:40px;
    margin: 0 auto;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}

Answer 1

Your math (and everything else) will be easier if you use the alternate to rotate, skew:

.container {
    overflow:hidden;
    width:100%;
}
.rotaded {
    background:red;
    width:100%;
    height:200px;
    -webkit-transform: skewY(-3deg);
    -moz-transform: skewY(-3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}
p {
    width:100px;
    height:200px;
    position:relative;
    top:40px;
    margin: 0 auto;
    -webkit-transform: skewY(3deg);
    -moz-transform: skewY(3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}

The Main advantage is that skewY won't change the width of the transformed element (and the vertical sides go on being vertical), that seems to be what you want

fiddle

Answer 2

Well, if your 120% width... then it seems as though 20% is going to the right off screen..

So instead of that, lets have 10% go off to the right, and 10% off to the left, so its even.

So try

.rotaded {
    margin-left: -10%;
}

or

.rotaded {
    left: -10%;
    position: relative; //likely need to add this
}

Answer 3

You can do this by adding this line:

/*margin: 0 0 0 30%;*/   

.container {
overflow:hidden;
width:100%;

}
.rotaded {
    background:red;
    width:120%;
    height:200px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}
p {
    width:100px;
    height:200px;
    position:relative;
    top:40px;
    margin: 0 0 0 30%;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
}

Answer 4

if you had a transparent border of anysize on the right, it will show your background all the way through, even if it is a background-image: http://jsfiddle.net/qf2tg/5/

.container {
            overflow:hidden;
            width:100%;
        }
        .rotaded {
            background: url(http://lorempixel.com/800/800/nature);/* let use an image instead color  
    to see what it does ;) */
            width:100%;
            border-right:100px solid rgba(0, 0, 0, 0);/* here grow your container 
    to have it overflow 
    , beware of the use of box-sizing :) 
    and give enough width to your border, 
    higher is the container, bigger is the gap to fill  */
            height:200px;
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -webkit-transform-origin: bottom left;
            -moz-transform-origin: bottom left;
        }
        p {
            text-align:center;
            height:200px;
            position:relative;
            top:20px;
            margin: 0 auto;
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -webkit-transform-origin: bottom left;
            -moz-transform-origin: top left;
        }

to center your image, do not give a width to <p> , but a text-align:center; should do fine .

higher will be height or rotation will be, bigger will be the gap to fill,you need to increase border's width as much as needed to fill it.