Bonjour j'essaie de me faire une un loader (en css) maison, et j'ai de vrais soucis de centrage à la fois verticaux et horizontaux.

Je voudrais mon image sur les deux carrés qui bougent sans qu'elle n'ai l'effet négatif pour la couleur... mon code semble bon en HTML et en CSS, mais lorsque je veux centrer verticalement mon image, voilà que si je met un position:absolute; avant de mettre un transform: translate(0,50%); tout foire :/

J'ai esseyé le vertical-align:middle; (sans oublier le display en inline) sans succès.

Mon but est un centrage parfait, verticalement et horizontalement, le plus simplement possible.

Si jamais quelqu'un pouvais m'aider, et m'expliquer afin que je comprenne je lui serai reconnaissant, merci.

<!-- Loader -->
    <div id="loader_logo">
        <div class="div1load"></div>
        <div class="div2load"></div>
        <img src="logo.png" alt="loader_logoà">
    </div>

#loader_logo {
    z-index: 15;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
}

#loader_logo img {
    z-index: 20;
    display: inline;
    position: relative;
    animation: 2.2s infinite notturn;
}

.div1load,
.div2load {
    z-index: 10;
    display: inline;
    position: absolute;
    background-color: white;
    border: 3px solid white;
    /* For vertical displaying in middle : */
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}

#loader_logo .div1load {
    animation: 2.2s infinite turn_zoom;
    -moz-animation: 2.2s infinite turn_zoom;
    -o-animation: 2.2s infinite turn_zoom;
    -webkit-animation: 2.2s infinite turn_zoom;
}

#loader_logo .div2load {
    animation: 2.2s infinite zoom;
    -moz-animation: 2.2s infinite zoom;
    -o-animation: 2.2s infinite zoom;
    -webkit-animation: 2.2s infinite zoom;
}

@media (min-width: 300px) {
    #loader_logo {
        margin-top: 10%;
    }
    @keyframes turn_zoom {
        0% {
            width: 130px;
            height: 130px;
            transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        50% {
            width: 200px;
            height: 200px;
            filter: invert(100%);
        }
        100% {
            width: 130px;
            height: 130px;
            transform: rotate(405deg);
            -moz-transform: rotate(405deg);
            -o-transform: rotate(405deg);
            -webkit-transform: rotate(405deg);
        }
    }
    @keyframes zoom {
        0% {
            width: 130px;
            height: 130px;
            transform: rotate(45deg);
        }
        50% {
            width: 200px;
            height: 200px;
            filter: invert(100%);
        }
        100% {
            width: 130px;
            height: 130px;
            transform: rotate(45deg);
        }
    }
    @keyframes notturn {
        0% {
            width: 130px;
            transform: rotate(0deg);
        }
        50% {
            width: 200px;
            /* filter: invert(100%); */
        }
        100% {
            width: 130px;
            transform: rotate(0deg);
        }
    }
}

@media (min-width: 770px) {
    #loader_logo {
        margin-top: 10%;
    }
    @keyframes turn_zoom {
        0% {
            width: 130px;
            height: 130px;
            transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        50% {
            width: 200px;
            height: 200px;
            filter: invert(100%);
        }
        100% {
            width: 130px;
            height: 130px;
            transform: rotate(405deg);
            -moz-transform: rotate(405deg);
            -o-transform: rotate(405deg);
            -webkit-transform: rotate(405deg);
        }
    }
    @keyframes zoom {
        0% {
            width: 130px;
            height: 130px;
            transform: rotate(45deg);
        }
        50% {
            width: 200px;
            height: 200px;
            filter: invert(100%);
        }
        100% {
            width: 130px;
            height: 130px;
            transform: rotate(45deg);
        }
    }
    @keyframes notturn {
        0% {
            width: 130px;
            transform: rotate(0deg);
        }
        50% {
            width: 200px;
            /* filter: invert(100%); */
        }
        100% {
            width: 130px;
            transform: rotate(0deg);
        }
    }
}

@media (min-width: 1200px) {
    #loader_logo {
        margin-top: 10%;
    }
    @keyframes turn_zoom {
        0% {
            width: 130px;
            height: 130px;
            transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        50% {
            width: 200px;
            height: 200px;
            filter: invert(100%);
        }
        100% {
            width: 130px;
            height: 130px;
            transform: rotate(405deg);
            -moz-transform: rotate(405deg);
            -o-transform: rotate(405deg);
            -webkit-transform: rotate(405deg);
        }
    }
    @keyframes zoom {
        0% {
            width: 130px;
            height: 130px;
            transform: rotate(45deg);
        }
        50% {
            width: 200px;
            height: 200px;
            filter: invert(100%);
        }
        100% {
            width: 130px;
            height: 130px;
            transform: rotate(45deg);
        }
    }
    @keyframes notturn {
        0% {
            width: 130px;
            transform: rotate(0deg);
        }
        50% {
            width: 200px;
            /* filter: invert(100%); */
        }
        100% {
            width: 130px;
            transform: rotate(0deg);
        }
    }
}

-
Edité par BaptisteCrouzet1 2 janvier 2018 à 18:20:51

Hm... je t'avoue que j'y comprend pas grand chose non plus à ce problème... mais j'ai centré ton logo en modifiant ceci :

.div1load,
.div2load {
    z-index: 10;
    display: inline;
    position: absolute;
    left: 44%;
    background-color: white;
    border: 3px solid white;
    /* For vertical displaying in middle : */
    top: 30%;
    transform: translate(0, -50%);

}

oui c'est ce que j'ai constaté en diminuant la dimension de mon écran toute à l'heure... tu peux peut-être essayer de le recentrer avec les medias queries quand il est trop decentré mais c'est pas très propre comme résolution du problème... Sinon j'ai aussi remarqué que c'était :

.div1load,
.div2load {
    z-index: 10;
    display: inline;
    position: absolute;
    background-color: white;
    border: 3px solid white;
    /* For vertical displaying in middle : */
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}

le position absolute qui posait problème ici sauf qu'en le retirant le problème est encore plus gros

Bonjour en fait pour centrer en absolute tu dois te servir de left et margin-left idem pour le top par exemple si ta div fait 100px de large et 20px de haut, tu fais :

madiv{
    position:absolute;
    width:100px;
    height:20px;
    left:50%;   // ici tu places à 50% de l'écran.
    margin-left:-50px; // ici tu enlèves le retrait de la moitié de ta div qui correspond à ça taille.
    top:50%;
    martin-top:-10px;
} 

Tu n'as pas besoin d'utiliser une translation pour ça, avec les préfixes ça fait beaucoup trop de code pour un simple centrage.
C'est idem pour la propriété top. 

Mettre le margin-left à -50% et le left à 50% revient à placer toujours à l'exact même endroit ma div, qui est décaléé avec mon image en absolute... :/

J'ai trouvé la solution, enfaite la balise IMG doit rester en relative et je dois juste mettre un top  dans mon animation qui varie de 62px aux états 0% et 100% et qui est a 82px à l'état 50%

Je reste déçu de pas trop comprendre ce qui clochait mais en tous cas j'ai la solution.

 Merci pour votre aide les gars!

(Résultat sur mon site en cours de développement: https://baptistecrouzet.fr/ )

-
Edité par BaptisteCrouzet1 4 janvier 2018 à 11:19:36