5 Replies Latest reply on Feb 21, 2016 10:41 AM by osgood_

    Centering layer

    lemonade2

      How to center a layer for browser window, horizontally and vertically?

        • 1. Re: Centering layer
          Nancy OShea Adobe Community Professional & MVP

          Vertical centering is not usually recommended. This demo would be OK for a business card or splash page only.

          http://alt-web.com/TEMPLATES/vertical-center.html

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: Centering layer
            christianb5949572 Level 1

            Is it normal I get a 404 when I go on your link?

             

            Thanks.

            • 3. Re: Centering layer
              Nancy OShea Adobe Community Professional & MVP

              Sorry but this thread is 6 years old.  That link is outdated now.

              For rudimentary vertical centering try this code.

               

              <!doctype html>

              <html>

              <head>

              <meta charset="utf-8">

              <title>Vertical Centered</title>

              <style>

              #centered {

              padding: 10px;

              background-color:#1E2B38;

              color: #F0AD4E;

              border:5px solid #4488C3;

              text-align: center;

              width: 50%; /*exactly half of screen width**/

              height: 50%; /*exactly half of screen height**/

              position: absolute;

              left: 25%; /*half the width of your container*/

              top: 25%; /*half the height of your container*/

              overflow:auto;/*scrollbars appear when needed*/

              }

              </style>

              </head>

              <body>

              <div id="centered">

              <h3>Heading 3</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

              <h3>Heading 3</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

              </div>

              </body>

              </html>

               

              Also see: Vertically Aligned Content in Bootstrap - http://alt-web.com/

              • 4. Re: Centering layer
                christianb5949572 Level 1

                Thanks!

                • 5. Re: Centering layer
                  osgood_ Level 8

                  If you don't need to support IE9 then using 'Flexbox' maybe be of interest to you, it's ridiculously simple. Example below:

                   

                   

                  <!DOCTYPE>

                  <html>

                  <head>

                  <meta charset="UTF-8" />

                  <title>Horizontally and Vertcically Centered</title>

                  <style>

                  html, body {

                  height: 100%;

                  margin: 0;

                  }

                  .full-screen {

                  height: 100%;

                  background-color: #000;

                  display: -webkit-box;

                  display: -webkit-flex;

                  display: -ms-flexbox;

                  display: flex;

                  -webkit-box-pack: center;

                  -webkit-justify-content: center;

                  -ms-flex-pack: center;

                  justify-content: center;

                  -webkit-box-align: center;

                  -webkit-align-items: center;

                  -ms-flex-align: center;

                  align-items: center;

                  }

                  .centered {

                  background-color: #F90;

                  width: 50%;

                  padding: 30px;

                  border: 1px solid #fff;

                  }

                  .centered h2 {

                  margin: 0;

                  padding: 0 0 15px 0;

                  color: #000;

                  text-align: center;

                  }

                  .centered p {

                  margin: 0;

                  padding: 0;

                  color: #fff;

                  text-align: center;

                  }

                  </style>

                  </head>

                   

                  <body>

                  <div class="full-screen">

                   

                  <div class="centered">

                   

                  <h2>I'm Centered</h2>

                   

                  <p>His porro sententiae theophrastus ea. Ea ius congue postea labores, noluisse suscipit interesset id sea. Senserit forensibus usu ex, sale voluptua scribentur usu te. Tota copiosae adolescens est at, quem soluta vulputate vel te.</p>

                   

                  <p>Sit consul melius splendide te, vim ad iudico saperet electram. An deseruisse cotidieque pri, mea viris nostrum definitionem ut. Affert dictas fierent ex eos. Rebum omnium meliore eam at. Eruditi periculis consequuntur quo an, mel et mundi iudico. Et his ornatus intellegam.</p>

                  </div>

                  <!-- end centered -->

                   

                  </div>

                  <!-- end full-screen  -->

                  </body>

                  </html>