CSS Responsive center Div

je voudrais centrer quelque div qui a l'image de fond. Il y a un problème avec la réponse de cette div, parce que si je mets la largeur sur 80% et la hauteur sur 80% le bg-image n'est pas au centre. J'ai tout essayé, mais l'image ne peut pas rester au centre et si le navigateur est plus petit ou plus grand, c'est un gros problème.

donc si vous regardez l'image

block on center

je veux faire ce bloc blanc sensible.

il y a un peu de css que j'ai déjà écrit, mais pour l'instant n'est pas responsive:

top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;
3
demandé sur user1257255 2012-09-28 22:24:14

6 réponses

je voulais faire la même chose il y a 2 ans, il y a la solution:

parce que vous voulez qu'il réponde, vous pouvez utiliser la fonction @media dans CSS3. Comme ceci:

@media (max-width: 480px) {
    #div {
        top: 50%; /* IMPORTANT */
        left: 50%; /* IMPORTANT */
        display: block;
        position: absolute;
        background: url(images/background.png) no-repeat center center;
        width: 750px;
        height: 417px;

        margin-top: -208.5px; /* HALF OF THE HEIGHT */
        margin-left: -375px; /* HALF OF THE WIDTH */
    }
}

Le max-width que vous utilisez est la largeur maximale de l'écran de l'appareil. Il suffit de le copier et de changer le width, height, margin-left and margin-top pour l'image. Vous devez aussi changer l'étiquette background !

il centrera l'image sur la page.

vous pouvez voir un exemple à: Créations MicroWeb - Carrières . L'image est totalement centrée même si vous changez le côté de la fenêtre.

vous pouvez ajouter overflow: hidden; sur le body pour rendre la page non contrôlable lorsque la résolution est trop faible. Comme je l'ai fait.

EDIT : JSFiddle

10
répondu Frederick Marcoux 2012-09-28 22:58:26

Essayez avec auto des marges et de l'affichage de la table:

.your-class {
  margin-left: auto;
  margin-right: auto;
  display: table;
}
5
répondu monteirobrena 2015-09-16 13:56:08

s'il vous Plaît essayez ce qui suit:

img { max-width:100%; max-height:100%; margin:auto; }
2
répondu suresh.g 2012-09-28 18:51:25

vous pouvez utiliser margin:0 auto; pour centrer un div horizontalement aussi longtemps que sa largeur est inférieure à celle du Div conteneur.

1
répondu thatidiotguy 2012-09-28 18:25:47

vous pouvez utiliser CSS transform:

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
1
répondu Steve Glick 2017-01-26 20:36:28

j'ai utilisé display: inline-block; sur element to center et text-align: center; sur parent div.

-1
répondu kravits88 2014-08-13 05:14:19