SHARE
TWEET

Untitled

a guest Jun 15th, 2019 49 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style type="text/css">
  2. body  {
  3.     margin: 0;
  4.     padding: 0;
  5.     text-align: center;
  6. }
  7. .bodyclass #container {
  8.     width: ???px; /*SET your width here*/
  9.     margin: 0 auto;
  10.     text-align: left;
  11. }
  12. </style>
  13. <body class="bodyclass ">
  14. <div id="container">type your content here</div>
  15. </body>
  16.      
  17. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  18. <html>
  19. <head>
  20.   <title>Universal vertical center with CSS</title>
  21.   <style>
  22.     .greenBorder {border: 1px solid green;} /* just borders to see it */
  23.   </style>
  24. </head>
  25.  
  26. <body>
  27.   <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
  28.     <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
  29.       <div class="greenBorder" style=" #position: relative; #top: -50%">
  30.         any text<br>
  31.         any height<br>
  32.         any content, for example generated from DB<br>
  33.         everything is vertically centered
  34.       </div>
  35.     </div>
  36.   </div>
  37. </body>
  38. </html>
  39.      
  40. <div class="parent">
  41.     <span>center content using transform</span>
  42.     </div>
  43.  
  44.     //CSS
  45.     .parent {
  46.         position: relative;
  47.         height: 200px;
  48.         border: 1px solid;
  49.     }
  50.     .parent span {
  51.         position: absolute;
  52.         top: 50%;
  53.         left: 50%;
  54.         -webkit-transform: translate(-50%, -50%);
  55.         transform: translate(-50%, -50%);
  56.     }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top