# Positionnement avec flex-box

**URL:** <https://www.debian-fr.org/t/positionnement-avec-flex-box/88158>\
**Category:** Programmation\
**Created:** [Avril 30, 2023, 7:42 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158 "2023-04-30T07:42:14Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Avril 30, 2023, 7:42 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/1 "2023-04-30T07:42:14Z")

</div>

Bonjour

Pourrais -je avoir une explication sur le fait ma div ne se place pas au centre sur le cross axis

```html
<body>
    <div class="wrapper">
<div class="picture">
    
</div>

    </div>
</body>

```

mon css:

```css

*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
  display: flex; 
  place-content: center; 
}
.wrapper{
width: 600px;
height: 450px;    
background-color: blueviolet;

}

```

ma page:

 ![1](https://www.debian-fr.org/uploads/default/original/2X/0/096dc9d26030848107f6abef9718e77cd0a845f5.jpeg)

Merci

---

<div class="post-metadata">

**Author:** ![Zargos](https://www.debian-fr.org/user_avatar/www.debian-fr.org/zargos/32/10889_2.png) [@Zargos](https://www.debian-fr.org/u/Zargos)\
**Post date:** [Avril 30, 2023, 5:30 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/2 "2023-04-30T17:30:29Z")

</div>

Bonjour,  
center ne correspond qu’au centrage horizontal, pas le vertical.

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Mai 1, 2023, 5:18 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/3 "2023-05-01T05:18:34Z")

</div>

Bonjour  
je comprends pas ton message

place-content regroupe :  
-align-items:center  
-justify-content:center  
qui doivent positionner un element au centre tant a l horizontal qu’a la vertical

---

<div class="post-metadata">

**Author:** ![Clochette](https://www.debian-fr.org/user_avatar/www.debian-fr.org/clochette/32/8757_2.png) [@Clochette](https://www.debian-fr.org/u/Clochette)\
**Post date:** [Mai 1, 2023, 9:22 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/4 "2023-05-01T09:22:19Z")

</div>

> [@Pat66](#):
>
> ```auto
> *,*::before,*::after{
> box-sizing: border-box;
> margin: 0;
> padding: 0;
> }
> body{
> display: flex; 
> place-content: center; 
> }
> .wrapper{
> width: 600px;
> height: 450px;    
> background-color: blueviolet;
> 
> }
> 
> ```

essai de doubler voir ton center comme ceci :

```auto
*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
  display: flex; 
  place-content: center center; 
}
.wrapper{
width: 600px;
height: 450px;    
background-color: blueviolet;

}

```

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Mai 1, 2023, 12:35 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/5 "2023-05-01T12:35:31Z")

</div>

Bonjour  
merci pour ton message ca ne change rien

---

<div class="post-metadata">

**Author:** ![Clochette](https://www.debian-fr.org/user_avatar/www.debian-fr.org/clochette/32/8757_2.png) [@Clochette](https://www.debian-fr.org/u/Clochette)\
**Post date:** [Mai 1, 2023, 12:50 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/6 "2023-05-01T12:50:28Z")

</div>

Pose ton css complet ainsi que ton html complet.

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Mai 1, 2023, 12:55 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/7 "2023-05-01T12:55:56Z")

</div>

c est le css et html complet

---

<div class="post-metadata">

**Author:** ![Clochette](https://www.debian-fr.org/user_avatar/www.debian-fr.org/clochette/32/8757_2.png) [@Clochette](https://www.debian-fr.org/u/Clochette)\
**Post date:** [Mai 1, 2023, 1:09 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/8 "2023-05-01T13:09:47Z")

</div>

Non il te manque les balise à minima sur ton html …

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Mai 1, 2023, 2:29 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/9 "2023-05-01T14:29:11Z")

</div>

Voila:

```auto
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>challenge</title>
</head>
<body>
    <div class="wrapper">
<div class="picture">
    
</div>

    </div>
</body>
</html>
```

---

<div class="post-metadata">

**Author:** ![cdpointpoint](https://www.debian-fr.org/letter_avatar_proxy/v4/letter/c/cdc98d/32.png) [@cdpointpoint](https://www.debian-fr.org/u/cdpointpoint)\
**Post date:** [Mai 1, 2023, 2:46 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/10 "2023-05-01T14:46:49Z")

</div>

Salut,  
Pas spécialiste de l’utilisation de flexbox, mais l’alignement vertical s’obtient avec [align-items](https://developer.mozilla.org/fr/docs/Web/CSS/align-items).  
Or, [place-content](https://developer.mozilla.org/fr/docs/Web/CSS/place-content) vaut pour **align-_content_** et **justify-content**.  
Il faut donc ajouter **align-items:center** et fixer une hauteur au body avec la propriété **height**.

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Mai 1, 2023, 2:48 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/11 "2023-05-01T14:48:35Z")

</div>

Merci

meme avec

```css
justify-content:center;
align-items:center;

```

le resultat est identique

---

<div class="post-metadata">

**Author:** ![cdpointpoint](https://www.debian-fr.org/letter_avatar_proxy/v4/letter/c/cdc98d/32.png) [@cdpointpoint](https://www.debian-fr.org/u/cdpointpoint)\
**Post date:** [Mai 1, 2023, 3:47 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/12 "2023-05-01T15:47:54Z")

</div>

Tu as bien mis une hauteur à ton body ?  
J’ai fait le test avec les propriétés suivantes et ça fonctionne :

```auto
body{
      display: flex; 
      justify-content: center;
      align-items: center;
      height: 100vh;
}

```

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Mai 1, 2023, 4:11 UTC](https://www.debian-fr.org/t/positionnement-avec-flex-box/88158/13 "2023-05-01T16:11:19Z")

</div>

Merci en effet j 'ai pas mis une taille