Easy CSS way to center item with position absolute

There are 2 way to center a child at the center without use any javascript.
I wrote the style inline that is easier to understand

Solution 1
move the parent to the center and then move the child right by the half of his width

<div style="position:relative">
    <div style="position:absolute;left:50%">
        <div style="position:relative;left: -50%">
            Put your content here
        </div>
    </div>
</div>

Solution 2 using Transform Translate

<div style="position:relative">
    <div style="position:absolute;left:50%;transform: translate(-50%,0)">
        Put your content here
    </div>
</div>
Annunci

Informazioni su Andrea Regoli

Project Manager .Net Developer WPF WP7 Asp.Net c# javascript ajax SQL sharepoint
Questa voce è stata pubblicata in HTML5 e contrassegnata con , , , . Contrassegna il permalink.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...