verticalement - vertical align css




Comment centrer l'élément absolument positionné dans div? (17)

Je dois placer un élément div (avec position:absolute; ) au centre de ma fenêtre. Mais j'ai des problèmes à le faire, parce que la largeur est inconnue .

J'ai essayé ça. Mais il doit être ajusté car la largeur est réactive.

.center {
  left: 50%;
  bottom:5px;
}

Des idées?


Solution réactive

Voici une bonne solution pour un design réactif ou des dimensions inconnues en général si vous n'avez pas besoin de supporter IE8 et plus bas.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}
<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Voici un violon JS

L'indice est, ce qui left: 50% est relatif au parent tandis que la transformation de translate est relative à la largeur / hauteur des éléments.

De cette façon, vous avez un élément parfaitement centré, avec une largeur flexible sur l'enfant et le parent. Bonus: cela fonctionne même si l'enfant est plus grand que le parent.

Vous pouvez également le centrer verticalement avec ceci (et encore, la largeur et la hauteur du parent et de l'enfant peuvent être totalement flexibles (et / ou inconnues)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Gardez à l'esprit que vous pourriez avoir besoin de transform fournisseur de transform . Par exemple -webkit-transform: translate(-50%,-50%);


À la recherche d'une solution J'ai obtenu des réponses ci-dessus et j'ai pu centrer le contenu avec Matthias Weiler mais en utilisant text-align.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

J'ai travaillé avec chrome et Firefox.


Cela a fonctionné pour moi:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

Cela fonctionne pour moi:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>


Fonctionne sur toute largeur aléatoire inconnue de l'élément positionné absolu que vous voulez avoir au centre de votre élément conteneur.

Demo

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/


Heres un plugin jQuery utile pour ce faire. Trouvé here . Je ne pense pas que ce soit possible avec CSS

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

J'ai utilisé une solution similaire:

#styleName {
    position: absolute;
    margin-left: -"X"px;
}

Où "X" est la moitié de la largeur d'un div que je veux afficher. Fonctionne bien pour moi dans tous les navigateurs.


Je comprends que cette question a déjà quelques réponses, mais je n'ai jamais trouvé une solution qui fonctionnerait dans presque toutes les classes, qui a aussi du sens et qui est élégante, alors voici mon avis après avoir peaufiné un tas:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}
<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

Ce que cela signifie est de me donner un top: 50% et un left: 50% , puis transformer (créer un espace) sur les deux axes X / Y à la valeur -50% , en un sens "créer un espace miroir".

En tant que tel, cela crée un espace égal sur tous les 4 points d'un div, qui est toujours une boîte (a 4 côtés).

Cette volonté:

  1. Travaillez sans connaître la taille / largeur du parent.
  2. Travailler sur réactif.
  3. Travailler sur l'axe X ou Y. Ou les deux, comme dans mon exemple.
  4. Je ne peux pas trouver une situation où cela ne fonctionne pas.

Je sais que j'ai déjà fourni une réponse, et ma réponse précédente, avec d'autres données, fonctionne très bien. Mais je l'ai utilisé dans le passé et cela fonctionne mieux sur certains navigateurs et dans certaines situations. Donc j'ai pensé que je donnerais cette réponse aussi. Je n'ai pas "éditer" ma réponse précédente et l'ajouter parce que je pense que c'est une réponse entièrement distincte et les deux que j'ai fournis ne sont pas liés.

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

Pour autant que je sache, ceci est impossible à réaliser pour une largeur inconnue.

Vous pouvez - si cela fonctionne dans votre scénario - positionner absolument un élément invisible avec 100% de largeur et de hauteur, et avoir l'élément centré dedans en utilisant margin: auto et éventuellement vertical-aligner. Sinon, vous aurez besoin de Javascript pour le faire.


Une approche simple qui a fonctionné pour moi de centrer horizontalement un bloc de largeur inconnue:

<div id="wrapper">
  <div id="block"></div>
</div>
#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Une propriété text-align peut être ajoutée au jeu de règles #block pour aligner son contenu indépendamment de l'alignement du bloc.

Cela a fonctionné sur les versions récentes de Firefox, Chrome, IE, Edge et Safari.


Vous pouvez placer l'image dans un div et ajouter un ID div et avoir le CSS pour ce div avoir un text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

Vraiment agréable post .. Je voulais juste ajouter si quelqu'un veut le faire avec une seule balise div puis ici la sortie:

Prenant la width comme 900px .

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

Dans ce cas, il faut connaître la width avance.


Centre absolu

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Démo: http://jsbin.com/rexuk/2/

Testé dans Google Chrome, Firefox et IE8

J'espère que cela t'aides :)


#content { margin:0 auto; display:table; float:none;}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>


#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}




absolute