28172 sujets

CSS et mise en forme, CSS3

Centre un element dans le 1er inférieur

Hello,

Une petite question à laquelle je ne trouve pas de réponse.

Grace a ce forum, j'avais appris a centre un div verticalement sur page grace a display:flex, voici le resulats si certains veulent voir, il me semble que le code est simple et fonctionne bien :

http://www.teamlescollets.com/promofarinauguration3/

Ma question aujourd'hui, je voudrai centre un div mais cette fois-ci, qu'il soit centre horizontalement et que verticalement il soit disons toujours au tiers inférieur de la page. Du coup si j'utilise un div en position absolu avec une marge d'un certains nombre de pixel, du coup selon la taille des ecrans le div apparait etre plus vars le bas ou plus vers le centre.

l'idée c'est que ce div soit toujours situé a 30% du bord inférieur par exemple !!!

Comment faire en css ?

Merci de votre aide
Bonjour,

Sans savoir si la page doit intégrer d'autre contenu, et si la rétro-compatibilité n'est pas un réel soucis pour ce développement, je serais partisan d'utiliser la position sticky combinée à l'unité vh tel que :


<head>
<style>
body {
  min-height: 100vh;
}
.video-container {
  position: sticky;
  bottom: 30vh;
  margin-left: auto;
  margin-right: auto;
}
video {
  width: 520px;
  height: 520px;
  background-color: salmon;
}
</style>
</head>
<body>
  <div class="video-container">
    <video>
    </video>
  </div>
</body>

Retenez que .video-container doit être enfant directe de body.
Sujet clos
Aller à