Garder ma div au milieu de la page par CalvinGuillemet - page 1

Bonjour

je souhaiterais garder ma div accueil au milieu de la page verticalement constamment quelqu'un peut m'aider

Merci

<!DOCTYPE html>
<html>

<head>
    <title>Accueil</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <link rel="icon" href="images/logoweb.png" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="css/accueil.css" rel="stylesheet" type="text/css">
    <link href="css/headerFooter.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="jquery/CustomScrollbar/jquery.mCustomScrollbar.css" />

</head>

<body>

    <header>
        <div class="anim">
            <!-- Header PC -->

            <div class="mobile">
                <button class="hamburger">&#9776;</button>
                <button class="hamburgerclose">&#9776;</button>
                <img class="hide" src="images/logoweb.png" alt="logo">
            </div>

            <div class="top">
                <img src="images/logo.png" alt="logo">
                <p id="dot1">&#9679 &#9679 &#9679 &#9679</p>
            </div>

            <ul id="headerid">
                <section>
                    <li><a href="index.html" id="active">Accueil</a></li>
                    <hr noshade="noshade">
                    <li><a href="Presentation.html">A Propos</a></li>
                    <hr noshade="noshade">
                    <li><a href="entreprise.html">Nos Entreprises</a></li>
                    <hr noshade="noshade">
                    <li><a href="actualite.html">Actualites</a></li>
                    <hr noshade="noshade">
                    <li><a href="Contact.html">Contact</a></li>
                </section>
            </ul>

            <p id="dot2">&#9679 &#9679 &#9679 &#9679</p>

            <!-- Footer PC -->

            <div id="footer">

                <section>

                    <h3>Nous suivre</h3>
                    <p>Saintes
                        <br>1 Rue Du DR Marie-François Bichat
                        <br>05 46 93 59 84</p>
                    <p>Pons
                        <br>3 Rue des Catalpas
                        <br>05 46 91 33 09</p>

                    <div class="trait"></div>

                    <div>
                        <span>
            <img src="icones/facebook.png" alt="facebook">
            </span>
                        <span>
            <img src="icones/social.png" alt="mail">
            </span>
                        <span>
            <img src="icones/linkedin.png" alt="linkedIn">
            </span>
                    </div>

                    <div class="trait"></div>

                    <article>&#169 2017, AGT GEOMETRE - TOUS DROITS RESERVES | <span>Psyko</span></article>
                </section>
            </div>
        </div>
    </header>
    
    <!-- Page Web-->

    <main>


        <div class="test">
            <img src="images/accueil.png" alt="actu">
        </div>

        
        <div class="accueil">

            <div class="fond1">
                <h1>AGT GEOMETRE<br>TOPOGRAPHE</h1>
                <article>Services de Topographie, d'Urbanisme, de Fonciers<br>et de Copropriété</article>
            </div>

            <img src="images/PAGE-DIVIDE.png" alt="hautdepage">
            <p>La Selarl BARRAUD - GUILLEMET, une société d' A.G.T ( Arpenteur Géomètre Topographe ),
                <br> nouvelle dénomination du Cabinet BARRAUD depuis le 01 Juillet 2014 suite à
                <br> l'association de Louis BARRAUD et Chrtistophe GUILLEMET, Géomètres-Experts
                <br> Associés, située 1 Rue du Docteur Bichat 17100 SAINTES, a repris l'ensemble des moyens ainsi que les archives des Cabinets BARRAUD, PASCON et OUDET. </p>

            <div class="btn"><a href="Presentation.html">En savoir plus sur nous</a></div>
        </div>


        <!-- Footer Cacher // Footer Mobile-Tablette -->

        <div id="footer2">
            <h3>Nous suivre</h3>
            <p>Saintes
                <br>1 Rue Du DR Marie-François Bichat
                <br>05 46 93 59 84</p>
            <p>Pons
                <br>3 Rue des Catalpas
                <br>05 46 91 33 09</p>

            <div class="trait"></div>

            <div>
                <span>
            <img src="icones/facebook.png" alt="facebook">
            </span>
                <span>
            <img src="icones/social.png" alt="mail">
            </span>
                <span>
            <img src="icones/linkedin.png" alt="linkedIn">
            </span>
            </div>

            <div class="trait"></div>

            <article>&#169 2017, AGT GEOMETRE - TOUS DROITS RESERVES | <span>Psyko</span></article>
        </div>

    </main>

    <!-- JAVASCRIPT -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="jquery/CustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/scrollbar.js" type="text/javascript"></script>
    <script src="js/menuBurger.js" type="text/javascript"></script>


</body>

</html>

main{
    float: right;
    width: 80%;
    height: 100vh;
    overflow: auto;
    background-image: url(../images/accueil.png);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover; 
    background-size: cover; 
}
    
.test{
    display: none;
}

.test img{
    width: 100%;
    height: auto;
    position: fixed;
    filter: brightness(130%) grayscale(10%);
}

.accueil h1{
    display: block;
    font-family: 'steelfish';
    text-align: center;
    margin-top: 50px;
    letter-spacing: 13px;
    font-size: 60px;
    font-weight: 500;
    color: white;
    text-shadow:0px 4px 3px #000000;
}

.accueil article{
    display: block;
    text-align: center;
    font-family: sans-serif;
    color: white;
    text-shadow:0px 4px 3px #000000;
    font-size: 22px;
    letter-spacing: 4px;
    margin-top: 10px;
    font-weight: bolder;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.accueil img{
    display: none;
}

#footer2{
    display:none;
}

.fond1 img{
    display: none;
}

.accueil p{
    width: 60%;
    color: white;
    text-shadow:0px 3px 2px #000000;
    font-family: arial;
    letter-spacing: 2px;
    margin-top: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 25px;
    font-size: 17px;
}

.btn {
  -webkit-box-shadow: 0px 2px 3px #000000;
  -moz-box-shadow: 0px 2px 3px #000000;
  box-shadow: 0px 2px 3px #000000;
  font-family: Arial;
  color: #ffffff;

width: 20%;
    height: auto;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
  padding: 10px 20px 10px 20px;
  border: solid #ffffff 5px;
    text-align: center;
    -webkit-transition: all 1s linear;
}

.btn a{
      text-shadow: 0px 2px 1px #000000;
      font-size: 21px;
      text-decoration: none;
    color: white;
    font-family: 'bebas neue';
}

.btn:hover{
    background-color: #070f13;
}

button{
    display: none;
}

.hide{
    display: none;
}

Bonjour,

sur des appareils à largeur réduite, ce n'est pas possible (ou du moins déconseillé) justement parce que la largeur est réduite et que les éléments s'affichent sur la hauteur, les uns à la suite des autres, ce qui en fait constitue l'affiche naturelle des éléments. Pour des écrans à grande largeur, c'est possible car on joue aussi sur la largeur et on peut afficher plusieurs éléments les uns à côté des autres. Pour ce que tu veux faire, il faut commencer par utiliser la propriété css

position: fixed;

et ensuite, trouver le moyen de centrer la div accueil verticalement. Mais puisque justement, tu veux qu'il soit toujours centré verticalement, cela veut dire qu'il doit toujours être visible, même quand on scroll vers le bas de la page parce qu'il y a beaucoup de contenu. Ce qu'il faudra donc faire, c'est l'afficher horizontalement sur le côté droit ou sur le côté gauche et pas centré horizontalement avec le reste du contenu, car si il est avec le reste de contenu, donc centré horizontalement, ce sera difficile - voire impossible - de toujours le centrer verticalement car le contenu peut changer d'une page à l'autre.

CalvinGuillemet

28 mai 2017 à 19:02:55

me_moi

28 mai 2017 à 21:24:41

lindadu01

29 mai 2017 à 11:22:36

Après tu peux "ruser" au niveau de ton CSS.

Tu positionnes ton "accueil" à 50% du top et tu fais un margin-top de la moitié de la hauteur de ta div.

Voici ce que ca donne pour centrer horizontalement un élement qui fait 85.5% de largeur :

header{
    width:85.5%;    
    position:fixed;
    left: 50%; /* on positionne l'élément à la moitié de l'écran */
    margin-left: calc(85.5%/-2); /* on applique une marge négative de la moitié de la largeur de l'élément */
}

Tu peux aisément t'en inspirer pour l'adapter à un centrage vertical