Centre de la boîte de Message sur Toute la Résolution de l'Écran

S'il vous plaît Aidez-moi à le centre de la boîte de message sur l'ajustement sur toute la résolution de l'écran..
pouvez-vous montrer ce que css ou le style, les marges, à gauche, à droite,que je peux utiliser?

Il n'est pas possible à la verticale du centre de contenu arbitraire des hauteurs à l'aide seulement de css.
Je pense que votre seule option est d'aller à javascript. Vous aurez besoin de re position de la boîte, si la taille de l'écran change.
Si vous pouvez corriger le contenu de la hauteur, c'est possible.

OriginalL'auteur jeromej | 2013-02-18

  1. 8

    Centre Horizontalement

    Pour centrer une div horizontalement, vous pouvez utiliser margin: auto auto; width: 500px où la largeur est la largeur que vous voulez qu'il soit.

    JS Fiddle

    HTML:

    <div id="content">
    Some content
</div>

    CSS:

    #content {
    width: 200px;
    margin: auto auto;
    background-color: #CCC;
}

    Le centre de l'écran avec des dimensions fixes

    Si vous pouvez corriger le contenu de hauteur et de largeur, il est alors possible de centrer la div à la fois horizontalement et verticalement à l'aide de seulement css. Ceci est réalisé par l'emballage de votre contenu dans un autre div, puis le positionnement de votre div du contenu du top: 50% et puis en soustrayant la moitié de la hauteur de la marge: margin-top: -100px, en supposant que la hauteur est de 200px. Voir l'exemple ci-dessous:

    JS Fiddle.

    HTML:

    <div id="wrapper">
    <div id="content">
        Some content
    </div>
</div>

    CSS:

    #wrapper {
    position: relative;
    background-color: #EEE;
    width: 200px;
    height: 200px;
    font-size: 10px;
}
#content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    background-color: #DDD;
}

    Faire semblant c'est centrée verticalement

    Aussi, vous pouvez donner un fixe margin-top (ou top avec position: absolute) pour le faire paraître centrée verticalement dans la plupart des ordinateurs de bureau et les écrans d'ordinateurs portables.

    JS Fiddle

    HTML:

    <div id="content">
    Some content
</div>

    CSS:

    #content {
    width: 200px;
    margin: 100px auto;
    background-color: #CCC;
}

    L'Utilisation De Javascript

    Il n'est pas possible à la verticale du centre de contenu arbitraire de la hauteur en utilisant juste le css. Dans ce cas, vous aurez besoin d'utiliser le Javascript pour la position de la div.:

    L'idée de base est:

    • calcul de la hauteur du contenu au moment où vous avez besoin de montrer le contenu, ou lorsque le contenu est chargé.
    • Puis changer tout le de nombreuses propriétés css pour positionner le div au centre vertical.

    Ma préférence personnelle est, vous utilisez position: absolute avec top de la propriété. Vous pouvez également utiliser margin-top mais vous ne voulez probablement pas cette div à prendre de la place dans le modèle de boîte si vous avez d'autres contenus sur la page.

    JS Fiddle

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var el = $('#content');
    var elWidth = el.width();
    var elHeight = el.height();

    el.css({
        position: 'absolute',
        top: (windowHeight / 2) - (elHeight / 2),
        left: (windowWidth / 2) - (elWidth / 2),
    });
});
</script>
<style>
#content {
    width: 200px;
    height: 200px;
    background-color: #CCC;
}
</style>
</head>
<body>
<div id="content">
    Some content
</div>
</body>
</html>

    Utiliser les nombreuses Javascript "plugins" disponible

    Il y a une multitude de frameworks CSS sur le web qui fournissent standard CSS que nous utilisons sur la plupart des sites web. Et certains de ces également aider avec ce genre de présentation commune des problèmes avec les petites Javascript plugins. Personnellement, je sais que Twitter Bootstrap fournit un Modal plugin que vous pouvez utiliser à cette fin. Il y a aussi de nombreux plugins jQuery pour le seul but de centrage du contenu dans une page.

    Conclusion

    Bien qu'il existe une multitude d'options pour atteindre cet objectif, j'ai ça triste de voir que les CSS ne fonctionne toujours pas en charge ce faire. C'est peut-être une chose difficile à faire à travers différents scénarios, je ne sais pas. Parmi les options que je mentionne ci-dessus, je pense que l'option Javascript est le plus polyvalent, et avec aujourd'hui navigateur vitesses, et la probabilité que personne ne l'avez désactivé Javascript sur leur navigateur, ce serait la meilleure façon d'aller.

    Vous avez oublié le display: table-cell; vertical-align: middle méthode.
    Stupide comment vous pouvez avoir des dégradés et des ombres et des coins arrondis (qui sont tous "à la mode"), mais ne peut pas faire quelque chose de simple/base comme l'alignement vertical.

    OriginalL'auteur andho

  2. 2

    Je viens juste de voir cette après lecture sur la façon de faire un sur un Des Techniques CSS page.

    Fondamentalement, de définir un peu de CSS:

    .Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

    AVANTAGES:

    • De la croix-navigateur (y compris IE8-10)

    • Aucun balisage, un minimum de styles

    • Réactif avec les pourcentages et les min-/max-

    • Utiliser une classe de centre de tout contenu

    Je n'ai pas eu le temps de le tester, mais je voulais poster ici dans l'espoir que cela aide les autres.

    OriginalL'auteur jp2code

  3. 0

    Ici est ce que vous êtes à la recherche pour http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

    Vous pouvez facilement le faire avec jquery! Ou avec un css solution donnée sur ce site!

    OriginalL'auteur Em Sta

  4. 0

    Vous devez nous donner votre code que vous avez essayé. Supposons que vous disposez d'un code HTML comme ci-dessous:

    <div id="message">
   Hello World!
</div>

    Code CSS:

    #message {
   width: 100px;
   height: 100px;
   margin: 50px auto;
}

    Ensuite votre boîte de message sera 100x100 et 50px de haut de l'écran et aligne automatiquement au centre de l'écran.

    OriginalL'auteur Tepken Vannkorn