besoin d'aide overlay

Salut,

http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/

merci pour ta reponse le probleme ses que j'ai essaye de faire le mien mais il ne veux pas se centrer voici un screen :

http://image.noelshack.com/fichiers/2016/24/1466170996-probleme.png

voici mon code js :

 <script type="text/javascript">
        $(document).ready(function () {

            $('#popups').click(function () {

                $('body').append('<div id="fade"></div>');

                $('#fade').css({'filter': 'alpha(opacity=80)'}).fadeIn();

                var Height = ($('.overlay').css('height') + 80) /2;
                var Width = ($('.overlay').css('width') + 80) / 2;

                $('#popup').css({
                    'display': 'block',
                   'margin-top' : -Height,
                    'margin-left' : -Width
                });
            });
            $('#close').click(function () {
                $('#popup').css({
                    'display': 'none'
                });

                $('#fade').remove()
            });
        });
    </script>

mon code css :

<style type="text/css">
        .overlay {
            display: none; 
            background: #fff;
            padding: 20px;
            border: 20px solid #ddd;
            float: left;
            font-size: 1.2em;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 99999;
            -webkit-box-shadow: 0px 0px 20px #000;
            -moz-box-shadow: 0px 0px 20px #000;
            box-shadow: 0px 0px 20px #000;
            /*--Coins arrondis en CSS3--*/
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            width: 400px;
            height: 500px;
        }

        .overlay .titre {
            z-index: 1001;
        }

        #fade { 
            display: none; 
            background: #000;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: .80;
            z-index: 1000;
        }

        .overlay .content span {
            position: relative;
            margin-top: -39px;
            margin-right: -21px;
            float: right;
            width: 30px;
            height: 30px;
            background-color: red;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            z-index: 9999;
        }
    </style>

Salut,

en fait quand tu mets

.overlay {
    ...
    left: 50%;
    ...

ça va déplacer la "bordure" gauche de l'overlay, pile à 50% de la largeur du parent.
Comme tu le vois sur ton screenshot, la bordure gauche est exactement à 50% (comme tu l'as demandé).
Bien sur, ce n'est pas ce qu'on voulait faire...
Une astuce serait de le déplacer de 50% moins "sa largeur divisée par 2".
Comme sa largeur est définie à 400px, on retirera 200px.

.overlay {
    ...
    left: calc(50% - 200px);
    ...

Du coup attention :
Si un jour tu changes la largeur de l'overlay, il faudra aussi penser à recalculer le "200px" qui sert à le centrer.
Si tu utilises un framework CSS, c'est le moment d'utiliser des variables.

Ou alors d'utiliser les transformations css parce que lors d'une translation en pourcentage elles prennent en compte la larger de l'élément :

.overlay {
    left: 50%;
    transform: translateX(-50%);
}

(n'oublie pas les préfixes)
Une vidéo de grafikart parle de centrer ses éléments, je t'inviteà y jeter un oeil ;)

dac merci je vais tester sa et je vous redi sa a fonctionner