Move centered element to corner

Question

I have a simple page with few elements: logo, below has the slogan, below has a ul with social network icons and an arrow that will trigger some script.

I would like to keep all these elements centered in the center of the screen, vertically and horizontally. Except the arrow, which should be centered horizontally, but at the bottom of the page.

It turns out that there are many resolutions and I would like these elements to always be centralized according to each user resolution I access. So far so good.

I need that when the user clicks the down arrow, move the logo to the top and left of the page. As well as scrolling down the arrow so that it is invisible on the user screen, move the social network icons to the footer, but to the right, and that the other elements receive fadeOut.

However, in order for elements to be moved, they need "position:Absolute/Fixed". How could I get the elements to be positioned as I want and move them, with Animate, to where I want?

Follows a piece of HTML code:

<div id="logo-container">
                <img id="logo" src="http://<?= $base?>img/logo.png" />
            </div>


            <div id="etc">
                <h3>Slogam</h3>
                <hr class="intro-divider">
                <h4>Compartilhe</h4>

                <ul class="list-inline intro-social-buttons">
                    <li>
                        <a href="https://twitter.com/SBootstrap"><i class="fa fa-twitter fa-fw"></i> <span class="network-name"><img src="http://<?= $base?>img/google-plus-ico.png" /></span></a>
                    </li>
                    <li>
                        <a href=""><i class="fa fa-github fa-fw"></i> <span class="network-name"><img src="http://<?= $base?>img/facebook-ico.png" /></span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name"><img src="http://<?= $base?>img/twitter-ico.png" /></span></a>
                    </li>
                </ul>
            </div>
            <div id="seta">
                <a href=""><img src="http://<?= $base?>img/seta-baixo-ico.png" /></a>
            </div>

Answer 1

From what I understand, your problem is needing position:absolute/fixed to animate and not be able to center the elements using these properties.
If so, I suggest a solution where it is possible to centralize elements with position: absolute

#elemento{
 position: absolute;
 left: 50%;
 margin-left: -150px; /*Sempre a metade da largura do elemento*/
 width: 300px;
 height: 300px;
}

<div id="elemento">
</div>